How to use react-query - 10 common examples

afterEach(async () => {
  queryCache.cancelQueries()
  queryCache.clear()

  // waitFor is important here. If there are queries that are being fetched at
  // the end of the test and we continue on to the next test before waiting for
  // them to finalize, the tests can impact each other in strange ways.
  await waitFor(() => expect(queryCache.isFetching).toBe(0))

  await flushPromises()
  await act(async () => await null)
})

afterEach(async () => {
  queryCache.cancelQueries()
  queryCache.clear()

  // waitFor is important here. If there are queries that are being fetched at
  // the end of the test and we continue on to the next test before waiting for
  // them to finalize, the tests can impact each other in strange ways.
  await waitFor(() => expect(queryCache.isFetching).toBe(0))

  await flushPromises()
  await act(async () => await null)
})

async function handleSubmit(event) {
    event.preventDefault()
    // mutate current data to optimistically update the UI
    // the fetch below could fail, so we need to revalidate
    // regardless

    setQueryData('todos', [...data, text], {
      shouldRefetch: false,
    })

    try {
      // send text to the API
      await mutatePostTodo(text)
      setText('')
    } catch (err) {
      console.error(err)
    }
  }

function EditTodo({ editingIndex, setEditingIndex }) {
  // Don't attempt to query until editingIndex is truthy
  const {
    data,
    isLoading,
    isFetching,
    error,
    failureCount,
    refetch
  } = useQuery(
    editingIndex !== null && ["todo", { id: editingIndex }],
    fetchTodoById
  );

  const [todo, setTodo] = React.useState(data);

  React.useEffect(() => {
    if (editingIndex !== null && data) {
      console.log(data);
      setTodo(data);
    } else {
      setTodo();
    }
  }, [data, editingIndex]);

  const [mutate, mutationState] = useMutation(patchTodo, {

loanableId,
  apiParameters,
}: {
  loanableId: string;
  apiParameters?: Partial;
}) => {
  const { sendInfoToast, sendSuccessToast, sendErrorToast } = useContext(
    ToastContext
  );

  // The loan edited in the modal.
  const [editLoan, setEditLoan] = useState(null);

  const { columns, sorting } = useColumns(columnsDefinition(setEditLoan));

  const [edit] = useMutation(api.loans.patch, {
    onMutate: () => sendInfoToast("Modification en cours…"),
    onSuccess: () => {
      sendSuccessToast("Modifications enregistrées !");
      queryCache.invalidateQueries("loans.list");
      setEditLoan(null);
    },
    onError: () => sendErrorToast("Une erreur est survenue."),
  });

  // Submit the form in the modal.
  const submit = (values, { setSubmitting }) => {
    if (editLoan) {
      if (values.status !== "RETURNED") {
        // `realReturnDate` may only change when the loanable returns.
        values.realReturnDate = null;

export default () => {
  const [text, setText] = React.useState('')
  const { data, isLoading, isFetching } = useQuery('todos', () =>
    fetch('/api/data')
  )

  const [mutatePostTodo] = useMutation(
    text =>
      fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify({ text }),
      }),
    {
      refetchQueries: ['todos'],
      // to revalidate the data and ensure the UI doesn't
      // remain in an incorrect state, ALWAYS trigger a
      // a refetch of the data, even on failure
      refetchQueriesOnFailure: true,
    }

export function useAvailableLogs(channel: string | null, username: string | null): [AvailableLogs, Error | undefined] {
    const { state, setState } = useContext(store);

    // @ts-ignore
    const { data } = useQuery<[AvailableLogs, Error | undefined]>(["availableLogs", { channel: channel, username: username }], () => {
        if (channel && username) {
            const channelIsId = isUserId(channel);
            const usernameIsId = isUserId(username);

            if (channelIsId) {
                channel = getUserId(channel)
            }
            if (usernameIsId) {
                username = getUserId(username)
            }

            const queryUrl = new URL(`${state.apiBaseUrl}/list`);
            queryUrl.searchParams.append(`channel${channelIsId ? "id" : ""}`, channel);
            queryUrl.searchParams.append(`user${usernameIsId ? "id" : ""}`, username);

            return fetch(queryUrl.toString()).then((response) => {

export default function Projects({ setActiveProject }) {
  const { data, isFetching } = useQuery("projects", fetchProjects);

  return (
    <div>
      <h1>Projects {isFetching ?  : null}</h1>
      {data.map(project =&gt; (
        <p>
          <button> {
              // Prefetch the project query
              prefetchQuery(["project", { id: project.name }], fetchProject);
              setActiveProject(project.name);
            }}
          &gt;
            Load
          </button>{" "}
          {project.name}</p></div>

onClick={() => {
              // Prefetch the project query
              prefetchQuery(["project", { id: project.name }], fetchProject);
              setActiveProject(project.name);
            }}
          >

const updateCache = useCallback(() => {
    const oldData = queryCache.getQueryData(cacheKey)

    if (!oldData || !revealedTestimonial) {
      return
    }

    queryCache.setQueryData(cacheKey, {
      ...oldData,
      results: oldData.results.map((oldTestimonial) => {
        return oldTestimonial.id === revealedTestimonial.id
          ? revealedTestimonial
          : oldTestimonial
      }),
    })
  }, [cacheKey, revealedTestimonial])