reactjs - Hvordan oppdatere data som React Query allerede har hentet, slik at jeg ikke trenger å hente alle dataene på nytt?

Akkurat nå ser koden min slik ut. Når en mutasjon er vellykket, må jeg hente alle dataene på nytt fordi tasks ikke vil bli oppdatert. Hvordan kan jeg oppdatere klient-side tasks når jeg sender inn eller sletter en oppgave?

  const { data: sessionData } = useSession()

  const {
    data: tasks,
    refetch: refetchTasks,
  } = api.task.getAll.useQuery(undefined, {
    enabled: sessionData?.user !== undefined,
  })

  const createTask = api.task.create.useMutation({
    onSuccess: async () => await refetchTasks(),
  })

  const createTaskValues = (values: { title: string }) =>
    createTask.mutate({ title: values.title })

  const deleteTask = api.task.delete.useMutation({
    onSuccess: async () => await refetchTasks(),
  })

PS

Å bruke useContext() er bedre enn å kalle refetch-funksjonen med mindre du vil hente data på nytt hver gang.

const utils = api.useContext()

  const createTask = api.task.create.useMutation({
    onSuccess: () => utils.task.getAll.invalidate()
  })

  const createTaskValues = (values: { title: string }) =>
    createTask.mutate({ title: values.title })

  const deleteTask = api.task.delete.useMutation({
    onSuccess: () => utils.task.getAll.invalidate()
  })

Svar #1

Du kan se på dette dokumentet

Du kan oppdatere fra mutasjonsresponsen, så du trenger ikke hente på nytt fra GET-APIet.

Svar #2

Først, oppgi en spørringsnøkkel til ditt useQuery-anrop (https://tanstack.com/query/latest/docs/react/guides/query-keys).

Deretter i onSuccess av mutasjonen din, vil du ugyldiggjøre den query-nøkkelen, noe som i praksis vil få React Query til å hente dataene på nytt for deg (https://tanstack.com/query/latest/docs/react/guides/query-invalidation).

For eksempel:

const { data: sessionData } = useSession()

const {
  data: tasks,
  refetch: refetchTasks,
} = api.task.getAll.useQuery(["tasks"], {
  enabled: sessionData?.user !== undefined,
})

const queryClient = useQueryClient();

const createTask = api.task.create.useMutation({
  onSuccess: () => {
    queryClient.invalidateQueries(["tasks"]);
  },
})

Relaterte artikler