Skip to content

Commit

Permalink
Address feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
kyletsang committed Sep 24, 2024
1 parent 9f3a8b9 commit f3b486a
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 63 deletions.
11 changes: 5 additions & 6 deletions docs/rtk-query/api/fetchBaseQuery.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ type FetchBaseQueryArgs = {
api: Pick<
BaseQueryApi,
'getState' | 'extra' | 'endpoint' | 'type' | 'forced'
>,
args: string | FetchArgs
> & { args: string | FetchArgs },
) => MaybePromise<Headers | void>
fetchFn?: (
input: RequestInfo,
Expand Down Expand Up @@ -106,7 +105,7 @@ Typically a string like `https://api.your-really-great-app.com/v1/`. If you don'

_(optional)_

Allows you to inject headers on every request. You can specify headers at the endpoint level, but you'll typically want to set common headers like `authorization` here. As a convenience mechanism, the second argument allows you to use `getState` to access your redux store in the event you store information you'll need there such as an auth token. Additionally, it provides access to `extra`, `endpoint`, `type`, and `forced` to unlock more granular conditional behaviors. Arguments passed to the query function is passed as the third argument in case you need those params in the context of the `prepareHeaders` function.
Allows you to inject headers on every request. You can specify headers at the endpoint level, but you'll typically want to set common headers like `authorization` here. As a convenience mechanism, the second argument allows you to use `getState` to access your redux store in the event you store information you'll need there such as an auth token. Additionally, it provides access to `args`, `extra`, `endpoint`, `type`, and `forced` to unlock more granular conditional behaviors.

You can mutate the `headers` argument directly, and returning it is optional.

Expand All @@ -120,7 +119,7 @@ type prepareHeaders = (
type: 'query' | 'mutation'
forced: boolean | undefined
},
args: string | FetchArgs
args: string | FetchArgs,
) => Headers | void
```

Expand Down Expand Up @@ -305,8 +304,8 @@ The default response handler is `"json"`, which is equivalent to the following f

```ts title="Default responseHandler"
const defaultResponseHandler = async (res: Response) => {
const text = await res.text();
return text.length ? JSON.parse(text) : null;
const text = await res.text()
return text.length ? JSON.parse(text) : null
}
```

Expand Down
22 changes: 9 additions & 13 deletions packages/toolkit/src/query/fetchBaseQuery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,7 @@ export type FetchBaseQueryArgs = {
api: Pick<
BaseQueryApi,
'getState' | 'extra' | 'endpoint' | 'type' | 'forced'
>,
args: string | FetchArgs,
> & { args: string | FetchArgs },
) => MaybePromise<Headers | void>
fetchFn?: (
input: RequestInfo,
Expand Down Expand Up @@ -165,7 +164,7 @@ export type FetchBaseQueryMeta = { request: Request; response?: Response }
* The base URL for an API service.
* Typically in the format of https://example.com/
*
* @param {(headers: Headers, api: { getState: () => unknown; extra: unknown; endpoint: string; type: 'query' | 'mutation'; forced: boolean; }, args: string | FetchArgs) => Headers} prepareHeaders
* @param {(headers: Headers, api: { getState: () => unknown; args: string | FetchArgs; extra: unknown; endpoint: string; type: 'query' | 'mutation'; forced: boolean; }) => Headers} prepareHeaders
* An optional function that can be used to inject headers on requests.
* Provides a Headers object, most of the `BaseQueryApi` (`dispatch` is not available), and the args passed into the query function.
* Useful for setting authentication or headers that need to be set conditionally.
Expand Down Expand Up @@ -242,17 +241,14 @@ export function fetchBaseQuery({

headers = new Headers(stripUndefined(headers))
config.headers =
(await prepareHeaders(
headers,
{
getState,
extra,
endpoint,
forced,
type,
},
(await prepareHeaders(headers, {
getState,
args,
)) || headers
extra,
endpoint,
forced,
type,
})) || headers

// Only set the content-type to json if appropriate. Will not be true for FormData, ArrayBuffer, Blob, etc.
const isJsonifiable = (body: any) =>
Expand Down
48 changes: 4 additions & 44 deletions packages/toolkit/src/query/tests/fetchBaseQuery.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -799,16 +799,17 @@ describe('fetchBaseQuery', () => {
})

test('prepareHeaders provides extra api information for getState, extra, endpoint, type and forced', async () => {
let _getState, _extra, _endpoint, _type, _forced
let _getState, _args, _extra, _endpoint, _type, _forced

const baseQuery = fetchBaseQuery({
baseUrl,
fetchFn: fetchFn as any,
prepareHeaders: (
headers,
{ getState, extra, endpoint, type, forced },
{ getState, args, extra, endpoint, type, forced },
) => {
_getState = getState
_args = args
_endpoint = endpoint
_type = type
_forced = forced
Expand Down Expand Up @@ -845,53 +846,12 @@ describe('fetchBaseQuery', () => {
await doRequest()

expect(_getState).toBeDefined()
expect(_args!.url).toBe('/echo')
expect(_endpoint).toBe('someEndpointName')
expect(_type).toBe('query')
expect(_forced).toBe(true)
expect(_extra).toBe(fakeAuth0Client)
})

test('prepareHeaders provides args', async () => {
let _args: any

const baseQuery = fetchBaseQuery({
baseUrl,
fetchFn: fetchFn as any,
prepareHeaders: (headers, _api, args) => {
_args = args

return headers
},
})

const fakeAuth0Client = {
getTokenSilently: async () => 'fakeToken',
}

const doRequest = async () => {
const abortController = new AbortController()
return baseQuery(
{ url: '/echo' },
{
signal: abortController.signal,
abort: (reason) =>
// @ts-ignore
abortController.abort(reason),
dispatch: storeRef.store.dispatch,
getState: storeRef.store.getState,
extra: fakeAuth0Client,
type: 'query',
forced: true,
endpoint: 'someEndpointName',
},
{},
)
}

await doRequest()

expect(_args!.url).toBe('/echo')
})
})

test('can pass `headers` into `fetchBaseQuery`', async () => {
Expand Down

0 comments on commit f3b486a

Please sign in to comment.