How to add custom headers in react query ?

[aasimafridi44]

Hi,
I am trying to add custom header in my project using custom hooks useQuery. I am unable to find the solution so someone can help to me to resolve it.

[TkDodo]

headers are out of scope for react-query. It depends solely on what you use for data fetching (fetch, axios, ky, graphql-request, ...)

[ackvf]

I am having issues with my domain, in the meantime, I am able to call the aws endpoint directly by providing it a host header.

curl -k -H "Host: develop.qwerty.xyz" https://staging-alb-123.us-west-2.elb.amazonaws.com/v1/health     

For this reason, I need some global option to add headers as adding it manually to every instance is out of scope.

Is something like that possible?

[louis-young]

It is but as above, you need to configure this via whatever you're using to make requests. TanStack Query is query function implementation agnostic; it has nothing to do with request headers.

[ackvf]

I see

[cjcaj]

You can try utilizing the meta option that gets passed to your defaultQueryFn.
useQuery({ meta: { headers: { this: 'that' } })

[ackvf]

Where can I read more about it? I called that and it doesn't seem to change anything.

[cjcaj]

https://tanstack.com/query/v4/docs/react/guides/query-functions#queryfunctioncontext

[cjcaj]

This is just a way to pass data from your use query hook to your queryFn. Then you'll have to wire up how the headers are set.