Skip to content

Commit 5ce06d1

Browse files
committed
Add serializeQueryArgs type support
1 parent 70f49a0 commit 5ce06d1

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

packages/toolkit/src/query/endpointDefinitions.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,67 @@ export interface InfiniteQueryExtraOptions<
598598

599599
infiniteQueryOptions: InfiniteQueryConfigOptions<ResultType, QueryArg>
600600

601+
/**
602+
* Can be provided to return a custom cache key value based on the query arguments.
603+
*
604+
* This is primarily intended for cases where a non-serializable value is passed as part of the query arg object and should be excluded from the cache key. It may also be used for cases where an endpoint should only have a single cache entry, such as an infinite loading / pagination implementation.
605+
*
606+
* Unlike the `createApi` version which can _only_ return a string, this per-endpoint option can also return an an object, number, or boolean. If it returns a string, that value will be used as the cache key directly. If it returns an object / number / boolean, that value will be passed to the built-in `defaultSerializeQueryArgs`. This simplifies the use case of stripping out args you don't want included in the cache key.
607+
*
608+
*
609+
* @example
610+
*
611+
* ```ts
612+
* // codeblock-meta title="serializeQueryArgs : exclude value"
613+
*
614+
* import { createApi, fetchBaseQuery, defaultSerializeQueryArgs } from '@reduxjs/toolkit/query/react'
615+
* interface Post {
616+
* id: number
617+
* name: string
618+
* }
619+
*
620+
* interface MyApiClient {
621+
* fetchPost: (id: string) => Promise<Post>
622+
* }
623+
*
624+
* createApi({
625+
* baseQuery: fetchBaseQuery({ baseUrl: '/' }),
626+
* endpoints: (build) => ({
627+
* // Example: an endpoint with an API client passed in as an argument,
628+
* // but only the item ID should be used as the cache key
629+
* getPost: build.query<Post, { id: string; client: MyApiClient }>({
630+
* queryFn: async ({ id, client }) => {
631+
* const post = await client.fetchPost(id)
632+
* return { data: post }
633+
* },
634+
* // highlight-start
635+
* serializeQueryArgs: ({ queryArgs, endpointDefinition, endpointName }) => {
636+
* const { id } = queryArgs
637+
* // This can return a string, an object, a number, or a boolean.
638+
* // If it returns an object, number or boolean, that value
639+
* // will be serialized automatically via `defaultSerializeQueryArgs`
640+
* return { id } // omit `client` from the cache key
641+
*
642+
* // Alternately, you can use `defaultSerializeQueryArgs` yourself:
643+
* // return defaultSerializeQueryArgs({
644+
* // endpointName,
645+
* // queryArgs: { id },
646+
* // endpointDefinition
647+
* // })
648+
* // Or create and return a string yourself:
649+
* // return `getPost(${id})`
650+
* },
651+
* // highlight-end
652+
* }),
653+
* }),
654+
*})
655+
* ```
656+
*/
657+
serializeQueryArgs?: SerializeQueryArgs<
658+
QueryArg,
659+
string | number | boolean | Record<any, any>
660+
>
661+
601662
/**
602663
* All of these are `undefined` at runtime, purely to be used in TypeScript declarations!
603664
*/

0 commit comments

Comments
 (0)