Replies: 1 comment
-
Would it be possible to resurrect this PR #7076? I've found Consider the following scenario:
For that we can use module declaration: import '@tanstack/react-query';
import { GraphQLClient } from 'graphql-request';
interface Meta {
graphQLClient: GraphQLClient;
}
declare module '@tanstack/react-query' {
interface QueryMeta extends Meta {}
interface MutationMeta extends Meta {}
} Then have a top-level provider: import React, { type PropsWithChildren } from 'react';
import {
QueryClientProvider as ReactQueryClientProvider,
useQueryClient,
} from '@tanstack/react-query';
import {
type GraphqlClient,
GraphQLClientProvider,
useGraphQLClient,
} from '@utils/graphql';
import { queryClient as queryClientDefault } from '@utils/queryClient';
const QueryClientProviderBase = ({
children,
graphqlClient,
}: PropsWithChildren<{
graphqlClient?: GraphqlClient;
}>) => {
const graphQLClientDefault = useGraphQLClient();
const queryClient = useQueryClient();
const { queries = {}, mutations = {} } = queryClient.getDefaultOptions();
queryClient.setDefaultOptions({
queries: {
...queries,
meta: {
...queries.meta,
graphQLClient: graphqlClient || graphQLClientDefault,
},
},
mutations: {
...mutations,
meta: {
...mutations.meta,
graphQLClient: graphqlClient || graphQLClientDefault,
},
},
});
return <>{children}</>;
};
export const QueryClientProvider = ({
children,
graphqlClient,
queryClient = queryClientDefault,
}: PropsWithChildren<{
graphqlClient?: GraphqlClient;
queryClient?: typeof queryClientDefault;
}>) => {
return (
<ReactQueryClientProvider client={queryClient}>
<GraphQLClientProvider>
<QueryClientProviderBase graphqlClient={graphqlClient}>
{children}
</QueryClientProviderBase>
</GraphQLClientProvider>
</ReactQueryClientProvider>
);
}; And this is how we generate query options: import { queryOptions } from '@tanstack/react-query';
import { graphql } from '../../gql';
const document = graphql(/* GraphQL */ `
query Entities {
entities {
id
name
}
}
`);
export const getEntitiesQueryOptions = () =>
queryOptions({
queryKey: ['entities'],
queryFn: ({ meta: { graphQLClient } }) =>
graphQLClient.request({
document,
}),
}); This way in our tests and storybooks we can swap the implementation of Now as I've mentioned it works with queries, but not for mutations. Also it would be great to have What do you think? |
Beta Was this translation helpful? Give feedback.
-
Since the onMutate function offers a place for preprocessing I'd find it helpful if not only the onError, onSuccess , ... callbacks receive the context (returned by the onMutate) as an input parameter but also the mutationFn.
Beta Was this translation helpful? Give feedback.
All reactions