Migrating react-query v3 to tanstack-query v4

Im almost finishing this migration process

const getChanges = async (): Promise<Changeset | undefined> => {
  try {
    const { data } = await Axios.get<Changeset | undefined>('/changeset')
    return data
  } catch {
    return undefined
  }
}

const useChanges = <T = Changeset | undefined>(
  options?: UseQueryOptions<Changeset | undefined, AxiosError, T>
) => {
  return useQuery(['changes'], getChanges, {
    keepPreviousData: true,
    refetchOnWindowFocus: false,
    staleTime: Infinity,
    ...options
  })
}

export default useChanges

const getChanges = async (): Promise<Changeset | undefined> => {
  try {
    const { data } = await Axios.get<Changeset | undefined>('/changeset')
    return data
  } catch {
    return undefined
  }
}

const useChanges = <T = Changeset | undefined>(
  options?: UseQueryOptions<Changeset | undefined, AxiosError, T>
) => {
  return useQuery(['changes'], getChanges, {
    keepPreviousData: true,
    refetchOnWindowFocus: false,
    staleTime: Infinity,
    ...options
  })
}

export default useChanges

Right now the problem im having is on the getChanges function:

Argument of type '() => Promise<Changeset | undefined>' is not assignable to parameter of type 'QueryFunction<Changeset, string[], any>'.

Argument of type '() => Promise<Changeset | undefined>' is not assignable to parameter of type 'QueryFunction<Changeset, string[], any>'.

Deleting the undefined value solves this error highlighting but the fetch of the data fails.

const getChanges = async (): Promise<Changeset> => {
  try {
    const { data } = await Axios.get<Changeset>('/changeset')
    return data
  } catch (error) {
    throw new Error('Failed to fetch changeset')
  }
}

const useChanges = <T = Changeset | undefined>(
  options?: UseQueryOptions<Changeset | undefined, AxiosError, T>
) => {
  return useQuery(['changes'], getChanges, {
    keepPreviousData: true,
    refetchOnWindowFocus: false,
    staleTime: Infinity,
    ...options
  })
}

const getChanges = async (): Promise<Changeset> => {
  try {
    const { data } = await Axios.get<Changeset>('/changeset')
    return data
  } catch (error) {
    throw new Error('Failed to fetch changeset')
  }
}

const useChanges = <T = Changeset | undefined>(
  options?: UseQueryOptions<Changeset | undefined, AxiosError, T>
) => {
  return useQuery(['changes'], getChanges, {
    keepPreviousData: true,
    refetchOnWindowFocus: false,
    staleTime: Infinity,
    ...options
  })
}

Missing queryFn for queryKey 'undefined' index.js:1191
XHRGET
http://localhost:3001/api/v2/changeset
[HTTP/1.1 404 Not Found 74ms]

Error: Failed to fetch changeset

Missing queryFn for queryKey 'undefined' index.js:1191
XHRGET
http://localhost:3001/api/v2/changeset
[HTTP/1.1 404 Not Found 74ms]

Error: Failed to fetch changeset

Am I missing something ?

2 Replies

Sturlen•2mo ago

In v4 useQuery just takes an options object:

const query = useQuery({ queryKey: ['changes'], queryFn: getChanges, ..options})

const query = useQuery({ queryKey: ['changes'], queryFn: getChanges, ..options})

more examples in the docs

Quick Start | TanStack Query React Docs

This code snippet very briefly illustrates the 3 core concepts of React Query: Queries

Knox•2mo ago

ohhhhhhh. Thank you so much for this :PES_Facepalm: Ive migrated another project from v4 to v5 and but on this project got so stuck on other problems that completely oversaw this. Thanks :prayge: I thought that was only on v5 since v4 migration guide only mentions:

;-useQuery('todos', fetchTodos) +
  useQuery(['todos'], fetchTodos)

;-useQuery('todos', fetchTodos) +
  useQuery(['todos'], fetchTodos)

:aPES_Think:

Gaming

Programming

Migrating react-query v3 to tanstack-query v4