Closed
Description
useQuery, useInfiniteQuery, queryClient.fetchQuery, queryClient.prefetchQuery, queryClient.fetchInfiniteQuery, queryClient.prefetchInfiniteQuery, useInfiniteQuery
input:
useQuery('todos', fetchTodos)
output:
useQuery(['todos'], fetchTodos)
input:
useQuery(['todos'], fetchTodos, { staleTime: 1000 })
output:
useQuery(['todos'], fetchTodos, { staleTime: 1000 })
input:
useQuery(['todos'], { queryFn: fetchTodos, staleTime: 1000 })
output:
useQuery(['todos'], { queryFn: fetchTodos, staleTime: 1000 })
input:
useQuery('todos', { queryKey: ['notTodos'], queryFn: fetchTodos, staleTime: 1000 })
output:
useQuery(['todos'], { queryKey: ['notTodos'], queryFn: fetchTodos, staleTime: 1000 })
input:
useQuery({ queryKey: 'todos', staleTime: 1000 })
output:
useQuery({ queryKey: ['todos'], staleTime: 1000 })
input:
const key = 'todos'
useQuery(key, { queryFn: fetchTodos, staleTime: 1000 })
output:
useQuery({ queryKey: [key], queryFn: fetchTodos, staleTime: 1000 })
input:
const queryKey = 'todos'
useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
output:
useQuery({ queryKey: [queryKey], queryFn: fetchTodos, staleTime: 1000 })
input:
const key = ['todos']
useQuery(key, { queryFn: fetchTodos, staleTime: 1000 })
output:
useQuery(key, { queryFn: fetchTodos, staleTime: 1000 })
input:
const queryKey = ['todos']
useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
output:
useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
input:
const queryKey = createKey()
useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
output:
useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
input:
import { useQuery as useReactQuery } from 'react-query'
const useQuery = (key, fn, options) => useReactQuery(key, fn, { ...options, staleTime: 1000 })
useQuery('todos', fetchTodos, {})
output:
import { useQuery as useReactQuery } from 'react-query'
const useQuery = (key, fn, options) => useReactQuery(key, fn, { ...options, staleTime: 1000 })
useQuery(['todos'], fetchTodos, {})
input:
import * as RQ from 'react-query'
const useQuery = (key, fn, options) => RQ.useQuery(key, fn, { ...options, staleTime: 1000 })
useQuery('todos', fetchTodos, {})
output:
import * as RQ from 'react-query'
const useQuery = (key, fn, options) => RQ.useQuery(key, fn, { ...options, staleTime: 1000 })
useQuery(['todos'], fetchTodos, {})
queryClient.invalidateQueries, queryClient.refetchQueries, queryClient.resetQueries, queryClient.removeQueries, queryClient.cancelQueries
input:
const queryClient = useQueryClient()
queryClient.invalidateQueries('todos')
output:
const queryClient = useQueryClient()
queryClient.invalidateQueries(['todos'])
input:
const queryClient = useQueryClient()
queryClient.invalidateQueries('todos', { exact: true })
output:
const queryClient = useQueryClient()
queryClient.invalidateQueries(['todos'], { exact: true })
input:
const queryClient = useQueryClient()
queryClient.invalidateQueries(['todos'], { exact: true }, options)
output:
const queryClient = useQueryClient()
queryClient.invalidateQueries(['todos'], { exact: true }, options)
input:
useQueryClient().invalidateQueries({ queryKey: 'todos', exact: true })
output:
useQueryClient().invalidateQueries({ queryKey: ['todos'], exact: true })
input:
useQueryClient().invalidateQueries({ queryKey: ['todos'], exact: true })
output:
useQueryClient().invalidateQueries({ queryKey: ['todos'], exact: true })
input:
const queryKey = 'todos'
useQueryClient().invalidateQueries({ queryKey, exact: true })
output:
useQueryClient().invalidateQueries({ queryKey: [queryKey], exact: true })
input:
const queryKey = ['todos']
useQueryClient().invalidateQueries({ queryKey, exact: true })
output:
useQueryClient().invalidateQueries({ queryKey, exact: true })
queryClient.getQueryData, queryClient.getQueryState, queryCache.find, queryClient.getQueriesData, queryClient.isFetching, useIsFetching, useIsMutating, queryCache.findAll, queryClient.setQueriesData
input:
const queryClient = useQueryClient()
queryClient.getQueryData('key', { exact: true })
output:
const queryClient = useQueryClient()
queryClient.getQueryData(['key'], { exact: true })
input:
const queryClient = useQueryClient()
queryClient.getQueryData(['key'], { exact: true })
output:
const queryClient = useQueryClient()
queryClient.getQueryData(['key'], { exact: true })
queryClient.setQueryData, queryClient.setMutationDefaults, queryClient.getMutationDefaults, queryClient.setQueryDefaults, queryClient.getQueryDefaults
- fn(key, updater, options)
+ fn([key], updater, options)useMutation
same as useQuery, except that queryKey is mutationKey
useQueries
An easy one because useQueries only gets an array passed, which should become an object. Nothing within query1 / query2 / query3 needs to change.
- useQueries([query1, query2, query3])
+ useQueries({ queries: [query1, query2, query3])after that, inside the queries object, we need to change queryKey to be an array, like for useQuery with the object syntax.