graphqlRequestBaseQuery - no headers can be set on query?

[bishonen]

When using the graphqlRequestBaseQuery as the baseQuery, the only available properties on the query param of an endpoint are document and variables.

How does one set a per-endpoint header then? Switching the baseQuery to fetchBaseQuery and the IDE's intellisense instantly shows the possiblity to add an header in there.

Thanks!

[phryneas]

It seems like a very unlikely use case for graphql honestly. What exactly do you want to do?

[bishonen]

An AWS endpoint requires me to attach the signed auth header which includes stuff like content length which i can only know at the time of every request. Im using the graphql codegen plugin if that is relevant.

[phryneas]

Hmm, if that is calculated from the request, I would just copy the graphqlRequestBaseQuery into your package and modify it to your needs at this point - it is just one file and seems like the easiest solution for that case.

https://github.com/reduxjs/redux-toolkit/blob/master/packages/rtk-query-graphql-request-base-query/src/index.ts

Essentially, you want to caluclate the value and do a client.setHeader directly after the try: https://github.com/reduxjs/redux-toolkit/blob/0df0c0628dcfea262b37a535ca1c13e73227a11c/packages/rtk-query-graphql-request-base-query/src/index.ts#L25-L36

[oojr]

requestHeaders has no documentation @bishonen, not sure if this feature is possible

[juanjoseluisgarcia]

requestHeaders has no documentation @bishonen, not sure if this feature is possible

Requestheaders in an object with key-value pair for the headers. The thing is how to make it dynamic

[phryneas]

a prepareHeaders function is being added in https://github.com/reduxjs/redux-toolkit/pull/1828

[M-Matin-dev]

#1828 has been merged into master and V1.7.2 has been released but the new version of @rtk-query/graphql-request-base-query has not been published on NPM yet. How can I add this to my project?

[lkuoch]

@phryneas Would it also be possible to roll graphqlRequestBaseQuery into the core toolkit package. I think graphql is commonly used enough to be included.

[phryneas]

@lkuoch no, that would add extra dependencies to the RTK package, which we are trying to avoid. Fetch is fine in that regard because it's an API that ships with the browser, not an external package. I'm updating graphql-request to 4.0 right now and add AbortSignal support. I had been waiting for their release, which in the end went unnoticed due to tooling problems on their side. If yall can give me some feedback that the CI build of #2030 works for you, I can put out a 2.0 within this week.

[factoidforrest]

Maybe a little late to the party, but another option may be to use the graphql-request client instead

import { createApi } from '@reduxjs/toolkit/query/react';
import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query';
import { GraphQLClient } from 'graphql-request';

export const client = new GraphQLClient(process.env.REACT_APP_GRAPHQL_URL || 'http://localhost:4455/v1/graphql');

// Like so
client.setHeader({'whatever':'whathaveyou'});

export const api = createApi({
  baseQuery: graphqlRequestBaseQuery({ client }),
  ...

[AleksandrukTad]

Hey, what is the easiest way to add credentials: "include" to the graphqlRequestBaseQuery ?

[yhunglee]

Hey, what is the easiest way to add credentials: "include" to the graphqlRequestBaseQuery ?

For @AleksandrukTad , you can follow the indirect way, which @factoidforrest provided, to GraphQLClient from package: graphql-request. Such as: export const client = new GraphQLClient(endpoint, { credentials: "include"} );