Clearing query data without invoking a fetch

I have a resource that returns a 404 when it hasn't been previously created.

A mutation is invoked, which creates the said resource - and the original query then runs and returns the object after invalidating the query.

Another mutation performs a DELETE. Because I know a refetch would return a 404 - I'd prefer to prevent useQuery from refetching the data.

I assumed that I could do something within the

onSuccess

onSuccess

on the mutation - but all options seem to lead to a re-fetch.

const queryKey = ['someKey']
const enabled = ref(true) // used for the original query
const isEnabled = computed(() => { return enabled.value }) // used for the original query

export const useMyComposable = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: () => myApi.deleteConfiguration(),
    onSuccess: () => {
      // This keeps the original data, and causes a refetch.
      // queryClient.invalidateQueries({ queryKey, })

      // This clears the original data, and causes a refetch.
      // queryClient.resetQueries({ queryKey, exact: true })

      // This removes the entire query but doesn't cause a redraw.
      // queryClient.removeQueries({ queryKey, exact: true })

      // This wont work because I want to set it to undefined, but undefined
      // in this case causes setQueryData to do nothing.
      // queryClient.setQueryData(queryKey, () => (undefined))
    },
  })
})

const queryKey = ['someKey']
const enabled = ref(true) // used for the original query
const isEnabled = computed(() => { return enabled.value }) // used for the original query

export const useMyComposable = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: () => myApi.deleteConfiguration(),
    onSuccess: () => {
      // This keeps the original data, and causes a refetch.
      // queryClient.invalidateQueries({ queryKey, })

      // This clears the original data, and causes a refetch.
      // queryClient.resetQueries({ queryKey, exact: true })

      // This removes the entire query but doesn't cause a redraw.
      // queryClient.removeQueries({ queryKey, exact: true })

      // This wont work because I want to set it to undefined, but undefined
      // in this case causes setQueryData to do nothing.
      // queryClient.setQueryData(queryKey, () => (undefined))
    },
  })
})

What am I missing? Do I need to also cancel the query after resetting perhaps?

TanStack•3y ago•

37 replies

foolish-indigo

Clearing query data without invoking a fetch

onSuccess

onSuccess

on the mutation - but all options seem to lead to a re-fetch.

const queryKey = ['someKey']
const enabled = ref(true) // used for the original query
const isEnabled = computed(() => { return enabled.value }) // used for the original query

export const useMyComposable = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: () => myApi.deleteConfiguration(),
    onSuccess: () => {
      // This keeps the original data, and causes a refetch.
      // queryClient.invalidateQueries({ queryKey, })

      // This clears the original data, and causes a refetch.
      // queryClient.resetQueries({ queryKey, exact: true })

      // This removes the entire query but doesn't cause a redraw.
      // queryClient.removeQueries({ queryKey, exact: true })

      // This wont work because I want to set it to undefined, but undefined
      // in this case causes setQueryData to do nothing.
      // queryClient.setQueryData(queryKey, () => (undefined))
    },
  })
})

const queryKey = ['someKey']
const enabled = ref(true) // used for the original query
const isEnabled = computed(() => { return enabled.value }) // used for the original query

export const useMyComposable = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: () => myApi.deleteConfiguration(),
    onSuccess: () => {
      // This keeps the original data, and causes a refetch.
      // queryClient.invalidateQueries({ queryKey, })

      // This clears the original data, and causes a refetch.
      // queryClient.resetQueries({ queryKey, exact: true })

      // This removes the entire query but doesn't cause a redraw.
      // queryClient.removeQueries({ queryKey, exact: true })

      // This wont work because I want to set it to undefined, but undefined
      // in this case causes setQueryData to do nothing.
      // queryClient.setQueryData(queryKey, () => (undefined))
    },
  })
})

What am I missing? Do I need to also cancel the query after resetting perhaps?

Clearing query data without invoking a fetch

Similar Threads

Clearing query data without invoking a fetch

Similar Threads

Similar Threads

Similar Threads