Example of using commitLocalUpdate with relay-nextjs

[p-null]

Hi,

I wonder how can I use commitLocalUpdate to update relay local data? e.g. If I add a comment to a post, I would like to see it reflected after I clicked submit. Currently I need to refresh to see the update.

By reading relay doc, it requires taking environment as a parameter. I was wondering

• can I just create a client by import { getClientEnvironment } from "@lib/relay_client_environment"; so it will be like this:

import { getClientEnvironment } from "@lib/relay_client_environment";

...
environment = getClientEnvironment()
commitLocalUpdate(environment, store => {
    // Imperatively mutate the store here
  });
...

• what about createClientEnvironment in withRelay? Can I use the environment created in withRelay?

export default withRelay(UserProfile, UserProfileQuery, {
    fallback: <Loading />,
    createClientEnvironment: () => getClientEnvironment()!,
    serverSideProps: async (ctx) => {

      const { getTokenFromCtx } = await import('lib/server/auth');
      const token = await getTokenFromCtx(ctx);
      if (token == null) {
        return {
          redirect: { destination: '/login', permanent: false },
        };
      }
  
      return { token };
    },
    createServerEnvironment: async (
      ctx,
      { token }: { token: string }
    ) => {
      const { createServerEnvironment } = await import('lib/server_environment');
      return createServerEnvironment(token);
    },
  });

[rrdelaney]

Hi @p-null! Relay exports a hook to get the environment used in RelayEnvironmentProvider: useRelayEnvironment. Passing this to commitLocalUpdate should work:

function Ticker() {
  const env = useRelayEnvironment();
  useEffect(() => {
    const tickInterval = setInterval(() => {
      commitLocalUpdate(env, (store) => {
        // ...
      });
    }, 3000);

   return () => clearInterval(tickInterval);
  }, [env]);
}