Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: prep react-query v5 by using object syntax #3540

Merged
merged 13 commits into from
Jan 9, 2023
Merged

chore: prep react-query v5 by using object syntax #3540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fee8462
hooks
juliusmarminge Jan 4, 2023
63eedb7
ssg
juliusmarminge Jan 4, 2023
6f0cdf6
Merge branch 'main' into prep-rq-v5
juliusmarminge Jan 9, 2023
28ec737
fix invalidate
juliusmarminge Jan 9, 2023
92d48f0
hacky fix?
juliusmarminge Jan 9, 2023
57b73c9
Merge branch 'main' into prep-rq-v5
juliusmarminge Jan 9, 2023
545ff70
fixy
juliusmarminge Jan 9, 2023
578d4d1
fixy2
juliusmarminge Jan 9, 2023
a816de6
move
juliusmarminge Jan 9, 2023
8ff843f
move
juliusmarminge Jan 9, 2023
045f974
move again
juliusmarminge Jan 9, 2023
e5f3c6f
move again
juliusmarminge Jan 9, 2023
c3f648f
Merge branch 'main' into prep-rq-v5
kodiakhq[bot] Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
130 changes: 69 additions & 61 deletions packages/react-query/src/shared/hooks/createHooksInternal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,96 +78,103 @@ export function createRootHooks<
ssrState,
fetchQuery: useCallback(
(pathAndInput, opts) => {
return queryClient.fetchQuery(
getArrayQueryKey(pathAndInput, 'query'),
() =>
return queryClient.fetchQuery({
...opts,
queryKey: getArrayQueryKey(pathAndInput, 'query'),
queryFn: () =>
(client as any).query(...getClientArgs(pathAndInput, opts)),
opts,
);
});
},
[client, queryClient],
),
fetchInfiniteQuery: useCallback(
(pathAndInput, opts) => {
return queryClient.fetchInfiniteQuery(
getArrayQueryKey(pathAndInput, 'infinite'),
({ pageParam }) => {
return queryClient.fetchInfiniteQuery({
...opts,
queryKey: getArrayQueryKey(pathAndInput, 'infinite'),
queryFn: ({ pageParam }) => {
const [path, input] = pathAndInput;
const actualInput = { ...(input as any), cursor: pageParam };
const actualInput = { ...input, cursor: pageParam };
return (client as any).query(
...getClientArgs([path, actualInput], opts),
);
},
opts,
);
});
},
[client, queryClient],
),
prefetchQuery: useCallback(
(pathAndInput, opts) => {
return queryClient.prefetchQuery(
getArrayQueryKey(pathAndInput, 'query'),
() =>
return queryClient.prefetchQuery({
...opts,
queryKey: getArrayQueryKey(pathAndInput, 'query'),
queryFn: () =>
(client as any).query(...getClientArgs(pathAndInput, opts)),
opts,
);
});
},
[client, queryClient],
),
prefetchInfiniteQuery: useCallback(
(pathAndInput, opts) => {
return queryClient.prefetchInfiniteQuery(
getArrayQueryKey(pathAndInput, 'infinite'),
({ pageParam }) => {
return queryClient.prefetchInfiniteQuery({
...opts,
queryKey: getArrayQueryKey(pathAndInput, 'infinite'),
queryFn: ({ pageParam }) => {
const [path, input] = pathAndInput;
const actualInput = { ...(input as any), cursor: pageParam };
const actualInput = { ...input, cursor: pageParam };
return (client as any).query(
...getClientArgs([path, actualInput], opts),
);
},
opts,
);
});
},
[client, queryClient],
),
invalidateQueries: useCallback(
(...args: any[]) => {
const [queryKey, ...rest] = args;

(queryKey, filters, options) => {
return queryClient.invalidateQueries(
getArrayQueryKey(queryKey, 'any'),
...rest,
{
...filters,
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
queryKey: getArrayQueryKey(queryKey as any, 'any'),
},
options,
);
},
[queryClient],
),
resetQueries: useCallback(
(...args: any[]) => {
const [queryKey, ...rest] = args;
const [queryKey, filters, options] = args;

return queryClient.resetQueries(
getArrayQueryKey(queryKey, 'any'),
...rest,
{
...filters,
queryKey: getArrayQueryKey(queryKey, 'any'),
},
options,
);
},
[queryClient],
),
refetchQueries: useCallback(
(...args: any[]) => {
const [queryKey, ...rest] = args;
const [queryKey, filters, options] = args;

return queryClient.refetchQueries(
getArrayQueryKey(queryKey, 'any'),
...rest,
{
...filters,
queryKey: getArrayQueryKey(queryKey, 'any'),
},
options,
);
},
[queryClient],
),
cancelQuery: useCallback(
(pathAndInput) => {
return queryClient.cancelQueries(
getArrayQueryKey(pathAndInput, 'any'),
);
return queryClient.cancelQueries({
queryKey: getArrayQueryKey(pathAndInput, 'any'),
});
},
[queryClient],
),
Expand Down Expand Up @@ -269,9 +276,10 @@ export function createRootHooks<
// request option should take priority over global
const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;

const hook = __useQuery(
getArrayQueryKey(pathAndInput, 'query') as any,
(queryFunctionContext) => {
const hook = __useQuery({
...ssrOpts,
queryKey: getArrayQueryKey(pathAndInput, 'query') as any,
queryFn: (queryFunctionContext) => {
Comment on lines +280 to +282
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

types complain here without the any - no idea why... either type the opts or the querykey as any 🤷🏼‍♂️

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

meh 🤷 it's okay sometimes, feel free to leave a // FIXME comment if you want

const actualOpts = {
...ssrOpts,
trpc: {
Expand All @@ -286,8 +294,9 @@ export function createRootHooks<
...getClientArgs(pathAndInput, actualOpts),
);
},
{ context: ReactQueryContext, ...ssrOpts },
) as UseTRPCQueryResult<unknown, TError>;
context: ReactQueryContext,
}) as UseTRPCQueryResult<unknown, TError>;

hook.trpc = useHookResult({
path: pathAndInput[0],
});
Expand All @@ -303,28 +312,26 @@ export function createRootHooks<
const { client } = useContext();
const queryClient = useQueryClient({ context: ReactQueryContext });

const hook = __useMutation(
(input) => {
const hook = __useMutation({
...opts,
mutationFn: (input) => {
const actualPath = Array.isArray(path) ? path[0] : path;

return (client.mutation as any)(
...getClientArgs([actualPath, input], opts),
);
},
{
context: ReactQueryContext,
...opts,
onSuccess(...args) {
const originalFn = () => opts?.onSuccess?.(...args);

return mutationSuccessOverride({
originalFn,
queryClient,
meta: opts?.meta ?? {},
});
},
context: ReactQueryContext,
onSuccess(...args) {
const originalFn = () => opts?.onSuccess?.(...args);

return mutationSuccessOverride({
originalFn,
queryClient,
meta: opts?.meta ?? {},
});
},
) as UseTRPCMutationResult<unknown, TError, unknown, unknown>;
}) as UseTRPCMutationResult<unknown, TError, unknown, unknown>;

hook.trpc = useHookResult({
path: Array.isArray(path) ? path[0] : path,
Expand Down Expand Up @@ -416,9 +423,10 @@ export function createRootHooks<
// request option should take priority over global
const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;

const hook = __useInfiniteQuery(
getArrayQueryKey(pathAndInput, 'infinite') as any,
(queryFunctionContext) => {
const hook = __useInfiniteQuery({
...ssrOpts,
queryKey: getArrayQueryKey(pathAndInput, 'infinite') as any,
queryFn: (queryFunctionContext) => {
const actualOpts = {
...ssrOpts,
trpc: {
Expand All @@ -439,8 +447,8 @@ export function createRootHooks<
...getClientArgs([path, actualInput], actualOpts),
);
},
{ context: ReactQueryContext, ...ssrOpts },
) as UseTRPCInfiniteQueryResult<unknown, TError>;
context: ReactQueryContext,
}) as UseTRPCInfiniteQueryResult<unknown, TError>;

hook.trpc = useHookResult({
path,
Expand Down
32 changes: 16 additions & 16 deletions packages/react-query/src/ssg/ssg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
>(
...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
) => {
return queryClient.prefetchQuery(
getArrayQueryKey(pathAndInput, 'query'),
() => {
return queryClient.prefetchQuery({
queryKey: getArrayQueryKey(pathAndInput, 'query'),
queryFn: () => {
return callProcedure({
procedures: router._def.procedures,
path: pathAndInput[0],
Expand All @@ -55,7 +55,7 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
type: 'query',
});
},
);
});
};

const prefetchInfiniteQuery = async <
Expand All @@ -64,9 +64,9 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
>(
...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
) => {
return queryClient.prefetchInfiniteQuery(
getArrayQueryKey(pathAndInput, 'infinite'),
() => {
return queryClient.prefetchInfiniteQuery({
queryKey: getArrayQueryKey(pathAndInput, 'infinite'),
queryFn: () => {
return callProcedure({
procedures: router._def.procedures,
path: pathAndInput[0],
Expand All @@ -75,7 +75,7 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
type: 'query',
});
},
);
});
};

const fetchQuery = async <
Expand All @@ -85,9 +85,9 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
>(
...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
): Promise<TOutput> => {
return queryClient.fetchQuery(
getArrayQueryKey(pathAndInput, 'query'),
() => {
return queryClient.fetchQuery({
queryKey: getArrayQueryKey(pathAndInput, 'query'),
queryFn: () => {
return callProcedure({
procedures: router._def.procedures,
path: pathAndInput[0],
Expand All @@ -96,7 +96,7 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
type: 'query',
});
},
);
});
};

const fetchInfiniteQuery = async <
Expand All @@ -106,9 +106,9 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
>(
...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
): Promise<InfiniteData<TOutput>> => {
return queryClient.fetchInfiniteQuery(
getArrayQueryKey(pathAndInput, 'infinite'),
() => {
return queryClient.fetchInfiniteQuery({
queryKey: getArrayQueryKey(pathAndInput, 'infinite'),
queryFn: () => {
return callProcedure({
procedures: router._def.procedures,
path: pathAndInput[0],
Expand All @@ -117,7 +117,7 @@ export function createSSGHelpers<TRouter extends AnyRouter>(
type: 'query',
});
},
);
});
};

function _dehydrate(
Expand Down