react-query with Nextjs' getStaticProps

[leo-petrucci]

I've just started off with React Query but I'm finding myself confused on how I can use it to fetch data client side with Next.js.

A lot of my data fetching is dependant on the page I'm on, however both useRouter as well as passing context.params are completely empty during the first render, which means If I try passing a value from the router that will be undefined:

  const router = useRouter();
  const { isFetching, data } = useQuery("server", async () => {
    const { post } = await request(
      endpoint,
      gql`
          query {
            post(id: ${router.query.id}) {
              title
            }
          }
        `
    );
    return post;
  });

In an app without react-query I would just fetch data inside useEffect and then map it to a state, however running useQuery inside of useEffect is kind of pointless as I'll still need to dispatch its outcome to a normal state.

What's the best approach to this situation? I'm very confused on how to get these two to work together nicely.

Edit: I've looked at the official next.js example, but it doesn't give a lot of help.

usePosts seems to have an isClient parameter, but it's undefined and unused in the hook 🤷‍♂️

Any help would be greatly appreciated as I am even more confused than before.

[parmdhillon]

Same here. I tried everything but no luck. If you found something please let me @creativiii

[TkDodo]

If you can create an open source example that I can check out, I’m happy to take a look

[leo-petrucci]

The problem isn't actually caused by getStaticProps, but more by the way Next.js works nowadays. Pages are rendered both server and client side even if no server-side functions are defined, which causes router to return undefined for the first render.

Example without react-query can be found here. Visit https://1erju.sse.codesandbox.io/?id=test and you'll be able to see the behavior in the console.

There are two solutions to this that I've been able to find:

1. Simply don't load the component until you are client side. You can do this by having an useEffect which sets a client boolean to true. And then conditionally render your component.
2. Pass an enabled option to useQuery which only gets set to true if on the client. (I haven't actually tested this but it should work.)

[TkDodo]

So is this the same as this issue then:
#1271

[leo-petrucci]

Oops, that seems to be the case. Couldn't find it when searching, sorry!