使用 React 手动刷新 react-query onClick

Question

当我重新获取我的查询时，当我有一个 onClick 按钮时它进入 'Updating ...' 状态，但我希望查询重新获取并显示 'Loading ...' 状态。我的代码是：

https://stackblitz.com/edit/react-ts-jfq8ve?file=index.tsx

import React, { useEffect } from 'react';
import { render } from 'react-dom';
import { useQuery } from 'react-query';
import axios from 'axios';
import { QueryClient, QueryClientProvider } from 'react-query';

const App: React.FunctionComponent = () => {
  const [value, setValue] = React.useState<number>(7);

  const queryKey = 'getData';

  const getData = async (): Promise<any> => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    const response = await axios
      .get(`https://jsonplaceholder.typicode.com/todos`)
      .then((res) => res.data);
    return response;
  };

  const {
    data: result,
    status,
    isRefetching,
    error,
    refetch,
  }: any = useQuery(queryKey, getData, {
    refetchOnWindowFocus: true,
    staleTime: 0,
    cacheTime: 0,
    refetchInterval: 0,
  });

  useEffect(() => {
    refetch();
  }, [value, refetch]);

  return (
    <div className="Container">
      <button onClick={() => setValue(prevValue => prevValue + 1 )}>Set value</button>
      {isRefetching ? <p className="mt-3">Updating data...</p> : null}
      {status === 'error' && <div className="mt-5">{error.message}</div>}
      {status === 'loading' && <div className="mt-5">Loading data ...</div>}
      {status === 'success' && (
        <div>
          {result?.map((inner: any, index: number) => {
            return <li key={index}>{inner.title}</li>;
          })}
        </div>
      )}
    </div>
  );
};

const queryClient = new QueryClient();

render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Answer 1

status === loading

if the query is in a "hard" loading state. This means there is no cached data, and the query is currently fetching...

我想您不需要针对您的特定情况使用 status === loading。使用 isFetching - 它包括初始加载和重新获取


import React, { useEffect } from 'react';
import { render } from 'react-dom';
import { useQuery } from 'react-query';
import axios from 'axios';
import { QueryClient, QueryClientProvider } from 'react-query';

const App: React.FunctionComponent = () => {
  const [value, setValue] = React.useState<number>(7);

  const queryKey = 'getData';

  const getData = async (): Promise<any> => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    const response = await axios
      .get(`https://jsonplaceholder.typicode.com/todos`)
      .then((res) => res.data);
    return response;
  };

  const {
    data: result,
    status,
    isFetching,
    error,
    refetch,
  }: any = useQuery(queryKey, getData, {
    refetchOnWindowFocus: true,
    staleTime: 0,
    cacheTime: 0,
    refetchInterval: 0,
  });

  useEffect(() => {
    refetch();
  }, [value, refetch]);

  return (
    <div className="Container">
      <button onClick={() => setValue(prevValue => prevValue + 1 )}>Set value</button>
      {status === 'error' && <div className="mt-5">{error.message}</div>}
      {isFetching && <div className="mt-5">Loading data ...</div>}
      {status === 'success' && (
        <div>
          {result?.map((inner: any, index: number) => {
            return <li key={index}>{inner.title}</li>;
          })}
        </div>
      )}
    </div>
  );
};

const queryClient = new QueryClient();

render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Answer 2

根据 Yozi 的回答，我删除了 useEffect 并将 refetch 功能放在按钮的 onClick 上。

  const {
    data: result,
    isFetching,
    status,
    error,
    refetch,
  }: any = useQuery(queryKey, getData, {
    refetchOnWindowFocus: true,
    staleTime: 0,
    cacheTime: 0,
    refetchInterval: 0,
  });

  return (
    <div className="Container">
      <button onClick={refetch}>Refetch query</button>
      {status === 'error' && <div className="mt-5">{error.message}</div>}
      {isFetching ? (
        <div className="mt-5">Loading data ...</div>
      ) : (
        <div>
          {status === 'success' && (
            <div>
              {result?.map((inner: any, index: number) => {
                return <li key={index}>{inner.title}</li>;
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

在线示例：https://stackblitz.com/edit/react-ts-j87pub?file=index.tsx

使用 React 手动刷新 react-query onClick

Manually refresh react-query onClick with React

javascript

reactjs

react-query