GraphQL Mutation returning null only when I reload the page

Question

I am using nextJS and urqlClient for ssr. I have ssr turned off in all my pages at the moment. The issue that i am facing is the following. I have profile page which renders data after fetching the user from graphql. If the user is not found it will router push the user to login. The issue that I am facing is that the mutation is returning undefined on the first render and the object on the second render when I manually go to the profile page in the browser using localhost:3000/profile.

But If I access the profile page using the NavBar component <NextLink href="/profile"> the mutation is returning the object on the first render and the data is displayed correctly. I have a feeling it is related to SSR because when i reload the page the console.log("profile page", data); is trigger in the server side but when I use the navbar it isn't.

I have all my pages wrapped in urqlclient as such

export default withUrqlClient(createUrqlClient, { ssr: false })(Profile);

This is the code for the profile page.

const [{ data, fetching }] = useMeQuery({ pause: isServer() });
  console.log("profile page", data);

  useEffect(() => {
    if (!data?.me) {
      router.push("/auth");
    }
  });

score 0 · Answer 1 · answered Feb 01 '22 at 18:25

So I fixed this by making sure that the router.push() method is not being trigger while my query is fetching and I added the dependencies for the useEffect. This is the correct way to do it. It had nothing to do with SSR.

  useEffect(() => {
    if (!fetching && !data?.me) {
      router.push("/auth");
    }
  },[fetching,data,router]);

GraphQL Mutation returning null only when I reload the page

1 Answers1