diff --git a/docs/framework/react/guides/migrating-to-react-query-4.md b/docs/framework/react/guides/migrating-to-react-query-4.md index 23a5ba12b1..7ba6fa7d43 100644 --- a/docs/framework/react/guides/migrating-to-react-query-4.md +++ b/docs/framework/react/guides/migrating-to-react-query-4.md @@ -65,8 +65,8 @@ However, we have not followed this concept through to all apis. For example, whe To streamline all apis, we've decided to make all keys Arrays only: ```tsx -- useQuery('todos', fetchTodos) // [!code --] -+ useQuery(['todos'], fetchTodos) // [!code ++] +;-useQuery('todos', fetchTodos) + // [!code --] + useQuery(['todos'], fetchTodos) // [!code ++] ``` #### Codemod @@ -117,8 +117,8 @@ Also, have a look at [the guide on dependent queries](../dependent-queries) Due to this change, disabled queries (even temporarily disabled ones) will start in `loading` state. To make migration easier, especially for having a good flag to know when to display a loading spinner, you can check for `isInitialLoading` instead of `isLoading`: ```tsx -- isLoading // [!code --] -+ isInitialLoading // [!code ++] +;-isLoading + // [!code --] + isInitialLoading // [!code ++] ``` See also the guide on [disabling queries](../disabling-queries#isInitialLoading) @@ -128,8 +128,16 @@ See also the guide on [disabling queries](../disabling-queries#isInitialLoading) The `useQueries` hook now accepts an object with a `queries` prop as its input. The value of the `queries` prop is an array of queries (this array is identical to what was passed into `useQueries` in v3). ```tsx -- useQueries([{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }]) // [!code --] -+ useQueries({ queries: [{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }] }) // [!code ++] +;-useQueries([ + { queryKey1, queryFn1, options1 }, + { queryKey2, queryFn2, options2 }, +]) + // [!code --] + useQueries({ + queries: [ + { queryKey1, queryFn1, options1 }, + { queryKey2, queryFn2, options2 }, + ], + }) // [!code ++] ``` ### Undefined is an illegal cache value for successful queries diff --git a/docs/framework/react/guides/migrating-to-v5.md b/docs/framework/react/guides/migrating-to-v5.md index 1c8a117512..b2ffc37db9 100644 --- a/docs/framework/react/guides/migrating-to-v5.md +++ b/docs/framework/react/guides/migrating-to-v5.md @@ -14,69 +14,52 @@ useQuery and friends used to have many overloads in TypeScript - different ways now we only support the object format. ```tsx -- useQuery(key, fn, options) // [!code --] -+ useQuery({ queryKey, queryFn, ...options }) // [!code ++] - -- useInfiniteQuery(key, fn, options) // [!code --] -+ useInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++] - -- useMutation(fn, options) // [!code --] -+ useMutation({ mutationFn, ...options }) // [!code ++] - -- useIsFetching(key, filters) // [!code --] -+ useIsFetching({ queryKey, ...filters }) // [!code ++] - -- useIsMutating(key, filters) // [!code --] -+ useIsMutating({ mutationKey, ...filters }) // [!code ++] +;-useQuery(key, fn, options) + // [!code --] + useQuery({ queryKey, queryFn, ...options }) - // [!code ++] + useInfiniteQuery(key, fn, options) + // [!code --] + useInfiniteQuery({ queryKey, queryFn, ...options }) - // [!code ++] + useMutation(fn, options) + // [!code --] + useMutation({ mutationFn, ...options }) - // [!code ++] + useIsFetching(key, filters) + // [!code --] + useIsFetching({ queryKey, ...filters }) - // [!code ++] + useIsMutating(key, filters) + // [!code --] + useIsMutating({ mutationKey, ...filters }) // [!code ++] ``` ```tsx -- queryClient.isFetching(key, filters) // [!code --] -+ queryClient.isFetching({ queryKey, ...filters }) // [!code ++] - -- queryClient.ensureQueryData(key, filters) // [!code --] -+ queryClient.ensureQueryData({ queryKey, ...filters }) // [!code ++] - -- queryClient.getQueriesData(key, filters) // [!code --] -+ queryClient.getQueriesData({ queryKey, ...filters }) // [!code ++] - -- queryClient.setQueriesData(key, updater, filters, options) // [!code --] -+ queryClient.setQueriesData({ queryKey, ...filters }, updater, options) // [!code ++] - -- queryClient.removeQueries(key, filters) // [!code --] -+ queryClient.removeQueries({ queryKey, ...filters }) // [!code ++] - -- queryClient.resetQueries(key, filters, options) // [!code --] -+ queryClient.resetQueries({ queryKey, ...filters }, options) // [!code ++] - -- queryClient.cancelQueries(key, filters, options) // [!code --] -+ queryClient.cancelQueries({ queryKey, ...filters }, options) // [!code ++] - -- queryClient.invalidateQueries(key, filters, options) // [!code --] -+ queryClient.invalidateQueries({ queryKey, ...filters }, options) // [!code ++] - -- queryClient.refetchQueries(key, filters, options) // [!code --] -+ queryClient.refetchQueries({ queryKey, ...filters }, options) // [!code ++] - -- queryClient.fetchQuery(key, fn, options) // [!code --] -+ queryClient.fetchQuery({ queryKey, queryFn, ...options }) // [!code ++] - -- queryClient.prefetchQuery(key, fn, options) // [!code --] -+ queryClient.prefetchQuery({ queryKey, queryFn, ...options }) // [!code ++] - -- queryClient.fetchInfiniteQuery(key, fn, options) // [!code --] -+ queryClient.fetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++] - -- queryClient.prefetchInfiniteQuery(key, fn, options) // [!code --] -+ queryClient.prefetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++] +;-queryClient.isFetching(key, filters) + // [!code --] + queryClient.isFetching({ queryKey, ...filters }) - // [!code ++] + queryClient.ensureQueryData(key, filters) + // [!code --] + queryClient.ensureQueryData({ queryKey, ...filters }) - // [!code ++] + queryClient.getQueriesData(key, filters) + // [!code --] + queryClient.getQueriesData({ queryKey, ...filters }) - // [!code ++] + queryClient.setQueriesData(key, updater, filters, options) + // [!code --] + queryClient.setQueriesData({ queryKey, ...filters }, updater, options) - // [!code ++] + queryClient.removeQueries(key, filters) + // [!code --] + queryClient.removeQueries({ queryKey, ...filters }) - // [!code ++] + queryClient.resetQueries(key, filters, options) + // [!code --] + queryClient.resetQueries({ queryKey, ...filters }, options) - // [!code ++] + queryClient.cancelQueries(key, filters, options) + // [!code --] + queryClient.cancelQueries({ queryKey, ...filters }, options) - // [!code ++] + queryClient.invalidateQueries(key, filters, options) + // [!code --] + queryClient.invalidateQueries({ queryKey, ...filters }, options) - // [!code ++] + queryClient.refetchQueries(key, filters, options) + // [!code --] + queryClient.refetchQueries({ queryKey, ...filters }, options) - // [!code ++] + queryClient.fetchQuery(key, fn, options) + // [!code --] + queryClient.fetchQuery({ queryKey, queryFn, ...options }) - // [!code ++] + queryClient.prefetchQuery(key, fn, options) + // [!code --] + queryClient.prefetchQuery({ queryKey, queryFn, ...options }) - // [!code ++] + queryClient.fetchInfiniteQuery(key, fn, options) + // [!code --] + queryClient.fetchInfiniteQuery({ queryKey, queryFn, ...options }) - // [!code ++] + queryClient.prefetchInfiniteQuery(key, fn, options) + // [!code --] + queryClient.prefetchInfiniteQuery({ queryKey, queryFn, ...options }) // [!code ++] ``` ```tsx -- queryCache.find(key, filters) // [!code --] -+ queryCache.find({ queryKey, ...filters }) // [!code ++] - -- queryCache.findAll(key, filters) // [!code --] -+ queryCache.findAll({ queryKey, ...filters }) // [!code ++] +;-queryCache.find(key, filters) + // [!code --] + queryCache.find({ queryKey, ...filters }) - // [!code ++] + queryCache.findAll(key, filters) + // [!code --] + queryCache.findAll({ queryKey, ...filters }) // [!code ++] ``` ### `queryClient.getQueryData` now accepts queryKey only as an Argument @@ -84,8 +67,8 @@ now we only support the object format. `queryClient.getQueryData` argument is changed to accept only a `queryKey` ```tsx -- queryClient.getQueryData(queryKey, filters) // [!code --] -+ queryClient.getQueryData(queryKey) // [!code ++] +;-queryClient.getQueryData(queryKey, filters) + // [!code --] + queryClient.getQueryData(queryKey) // [!code ++] ``` ### `queryClient.getQueryState` now accepts queryKey only as an Argument @@ -93,8 +76,8 @@ now we only support the object format. `queryClient.getQueryState` argument is changed to accept only a `queryKey` ```tsx -- queryClient.getQueryState(queryKey, filters) // [!code --] -+ queryClient.getQueryState(queryKey) // [!code ++] +;-queryClient.getQueryState(queryKey, filters) + // [!code --] + queryClient.getQueryState(queryKey) // [!code ++] ``` #### Codemod @@ -156,11 +139,11 @@ But It doesn't make much sense to do this while a query is still active, because if you still need to remove a query, you can use `queryClient.removeQueries({queryKey: key})` ```tsx - const queryClient = useQueryClient(); - const query = useQuery({ queryKey, queryFn }); +const queryClient = useQueryClient() +const query = useQuery({ queryKey, queryFn }) -- query.remove() // [!code --] -+ queryClient.removeQueries({ queryKey }) // [!code ++] +;-query.remove() + // [!code --] + queryClient.removeQueries({ queryKey }) // [!code ++] ``` ### The minimum required TypeScript version is now 4.7