Is it possible to set custom headers for each useQuery call?

[HiroshiIgarash]

I'd like to be able to specify custom headers individually for each useQuery call.

In my use case, an access key is passed via the URL query parameters, and I want to include that key in the request headers when executing a GraphQL query using useQuery.

For example:

const [{ data }] = useQuery({
  query: ...,
  context: useMemo(
    () => ({
      fetchOptions: () => {
        const accessKey = params?.accessKey;
        return {
          headers: {
              "x-accesskey": accessKey as string,
          },
        };
      },
    }),
    [params?.accessKey],
  ),
});

However, this approach does not work as expected. As a workaround, I had to define fetchOptions in the createClient configuration instead.

I'm using useQuery imported from @urql/next with SSR, and I need to extract an access key from the incoming request's URL (e.g. from query parameters). However, in the file where I define createClient, I don't have access to the request context, so I cannot read the URL or any request-specific data on the server. As a result, I can't include the access key in the headers at that point.

On the other hand, when I define fetchOptions inside useQuery as shown above, the access key seems to be properly included in the headers during SSR, and the query executes successfully on the server.

That said, I also need to run a different query on the client side, which similarly requires the access key to be included in the headers. For that to work, I again need to implement similar logic in the createClient configuration. This leads to duplicated logic, which feels redundant and hard to maintain.

Is it possible to set custom headers for each useQuery call?