diff --git a/src/index.ts b/src/index.ts index cb3f7a2..1053718 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,3 @@ export { default as useMutation } from "./useMutation"; export { default as useQuery } from "./useQuery"; export { default as wrapRootComponent } from "./wrapRootComponent"; -export { invalidateQuery } from "./utils"; diff --git a/src/useMutation.test.tsx b/src/useMutation.test.tsx index 2efec9b..2b1c063 100644 --- a/src/useMutation.test.tsx +++ b/src/useMutation.test.tsx @@ -5,36 +5,7 @@ import { setupServer } from "msw/node"; import { rest } from "msw"; import { useUnsweetenedMutation } from "./useMutation"; import { useUnsweetenedQuery } from "./useQuery"; -import { QueryClient, useQueryClient as useRQQueryClient } from "react-query"; -import { AnyFunction } from "./ts-helpers"; - -interface ExtendedQueryClient extends QueryClient { - invalidateQuery: (queryKey: AnyFunction) => void; - invalidateQueryKey: (queryKey: string) => void; -} - -function useQueryClient( - ...args: Parameters -): ExtendedQueryClient { - const client = useRQQueryClient(...args) as ExtendedQueryClient; - - client.invalidateQueryKey = function (queryKey: string) { - this.invalidateQueries(queryKey); - }; - client.invalidateQuery = function (queryKey: AnyFunction) { - // This is not a arbitrary convertion. queryKey works differently between the TS world - // and the runtime world: - // - In the TS world, this is a function - // - In the runtime world, this is a string - const queryKeyAsString = queryKey as unknown as string; - this.invalidateQueryKey(queryKeyAsString); - }; - - client.invalidateQueryKey = client.invalidateQueryKey.bind(client); - client.invalidateQuery = client.invalidateQuery.bind(client); - - return client; -} +import useQueryClient from "./useQueryClient"; let serverData: { numbers: Array } = { numbers: [], diff --git a/src/useQueryClient.ts b/src/useQueryClient.ts new file mode 100644 index 0000000..8497016 --- /dev/null +++ b/src/useQueryClient.ts @@ -0,0 +1,33 @@ +import { QueryClient } from "react-query"; +import { AnyFunction } from "./ts-helpers"; +import { useQueryClient as useRQQueryClient } from "react-query"; + +interface ExtendedQueryClient extends QueryClient { + invalidateQuery: (queryKey: AnyFunction) => void; + invalidateQueryKey: (queryKey: string) => void; +} + +function useQueryClient( + ...args: Parameters +): ExtendedQueryClient { + const client = useRQQueryClient(...args) as ExtendedQueryClient; + + client.invalidateQueryKey = function (queryKey: string) { + this.invalidateQueries(queryKey); + }; + client.invalidateQuery = function (queryKey: AnyFunction) { + // This is not a arbitrary convertion. queryKey works differently between the TS world + // and the runtime world: + // - In the TS world, this is a function + // - In the runtime world, this is a string + const queryKeyAsString = queryKey as unknown as string; + this.invalidateQueryKey(queryKeyAsString); + }; + + client.invalidateQueryKey = client.invalidateQueryKey.bind(client); + client.invalidateQuery = client.invalidateQuery.bind(client); + + return client; +} + +export default useQueryClient;