SSR: Change graphql headers in dynamic routes nextjs

[rohanrajpal]

Hey, I want to achieve the following with graphql, nextjs and urql SSR

1. I have setup a dynamic route [store-name].tsx
2. Now the store-name will be the value of the header token in my graphql url
3. This token will now be used for any of the future graphql requests

So if the graphql url was example.com/graphql, it shall now be example.com/graphql?token=store-name

I have setup SSR according to https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs. So I'm not sure where can I add the code to receive the store name, and change the grahpql headers accordingly.

If someone knows how to go about it, would be great if you could help

[JoviDeCroock]

In your [store-name].tsx

function Component() {
  const router = useRouter()
  useQuery({
    query: YOUR_QUERY,
    context: React.useMemo(function () { return { url: `example.com/graphql?token=${router.query['store-name']}` } }, []) 
  })
}

[JoviDeCroock]

ctx should always be defined on the server-side and undefined on the client-side so you're running into something weird, that being said I don't really think that's an urql concern 😅

I'll check this in a codesandbox in a bit

[JoviDeCroock]

@rohanrajpal I made an example for you https://codesandbox.io/s/vigorous-bell-c8qdg?file=/pages/%5Bid%5D.js

[rohanrajpal]

Thanks a lot @JoviDeCroock ! Everything is working as expected now. You're a lifesaver.

Mistakes I was making

• I didnt pass {ssr:true} 🤦 The docs didnt have ssr:true so I assumed that it is true by default.
• Turns out for urql the store-name comes from ctx.query.storename whereas in serversideprops it is ctx.params.id

@rohanrajpal I didn't look at your code-fragment well, you have to return the fetchOptions object from a function, then the Router will work correctly.

One last doubt I have is why did we use Router in a function? What was conceptually wrong here? As you might have inferred already, I'm pretty new to the web dev world.

Anyhow, learning from this, gonna read the docs a little more in depth in the future.

[JoviDeCroock]

When we use it as a plain object then it will get called before React/Next has initialized on the client making next think we are calling it at the wrong time. The only moment we want it to look at the router is when we are actually calling it from our React-world

[rohanrajpal]

Ohh got it, thanks Jovi!