Urql: Question: Passing headers in context as opts to fetcher

[josteph]

Hi guys!

Is it currently possible to customise each query's header on the fly?

For example:

const [{ data, fetching: loading }] = useQuery({
    query: HomeQuery,
    context: {
       headers: {
           'custom': 1
       },
    },
});

Looking at apollo, looks like they are passinng the context as the second arguments to the fetch function (opts).

Thanks!

[JoviDeCroock]

Hey,

Yes you can pass in fetchOptions which can be an object or function containing headers, ... https://formidable.com/open-source/urql/docs/api/core/#operationcontext I saw an error in our docs I'll correct it asap.

[josteph]

Passing in fetchOptions means it's during initialization of the Urql client right?

Some of use cases, you might need to pass specific header in specific query call.

[JoviDeCroock]

My explanation relates to the query call where you can do

useQuery({ context: { fetchOptions } })

I wonder if we should make this some kind off recipe in docs, not sure if basics covers this at this point. Will check it out, then again it’s not really basics.

EDIT: mentioned in the api docs and here https://formidable.com/open-source/urql/docs/basics/document-caching/#adding-typenames
Thinking what we should do to improve this.

[kitten]

We should likely expand on this in additional sections in “Queries” and “Mutations” along the lines of requestPolicy being a shortcut for the context object, but the entire object being modifiable

[josteph]

I recently tried to append fetchOptions to context to each individual query, it's resulting into something weird:

It always says the cache outcome is miss, even though the fetchPolicy is cache-first.

Both using v1.8.2 or v1.9.4 are the same.

Do you guys have any idea or maybe I'm missing something basic?

[JoviDeCroock]

Could you paste in your code or reproduce it in codesandbox please?

I think you might be changing the ref to your context every render, try wrapping it in useMemo, this is because we don't want to assume when you want to refetch due to a context change, these changes might not be highly relevant to your query itself.

[josteph]

@JoviDeCroock here's some minimal reproduction of it, call the useInfiniteLoop as a function instead.

https://codesandbox.io/s/hopeful-euler-e2gmq

[JoviDeCroock]

Yes so that's what I'm saying in that comment @josteph

I think you might be changing the ref to your context every render, try wrapping it in useMemo, this is because we don't want to assume when you want to refetch due to a context change, these changes might not be highly relevant to your query itself.

const useInfiniteLoop = () => {
  const [result] = useQuery({
    query: gql`
      {
        books {
          id
          name
          genre
          author {
            name
          }
        }
      }
    `,
    context: useMemo(() => ({
      fetchOptions: {
        headers: {
          "some-headers": "hello world"
        }
      }
    }, []),
  });

  return result;
};

[josteph]

Alright now I understood about it more now.
Honestly wasn't quite expecting it to be like that 😅

Thanks for the explanation!