使用React-Query解决接口请求的麻烦事

function App() {

  const [data, updateData] = useState(null);
  const [isError, setError] = useState(false);
  const [isLoading, setLoading] = useState(false);
  
  useEffect(async () => {
    setError(false);
    setLoading(true);
    try {
      const data = await axios.get('/api/user');
      updateData(data);
    } catch(e) {
      setError(true);
    }
    setLoading(false);
  }, [])
   
  if(isLoading) return ...
  
  if(isError) return ...
  
  return <List users={data}/>
}

//...
    try {
+      if(sessionUtil.get('users'){
+          updateData(sessionUtil.get('users'));
+          return;
+      }
      const data = await axios.get('/api/user');
+     sessionUtil.set('users',data)
      updateData(data);
    } catch(e) {
      setError(true);
    }
//...

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

new QueryClient({
  queryCache?: QueryCache;
  mutationCache?: MutationCache;
  logger?: Logger;
  defaultOptions?: DefaultOptions;
})

function Example() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then(
        (res) => res.json(),
      ),
  })

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

function Example() {
  const queryClient = useQueryClient()

  const data = queryClient.getQueryData(['repoData'])

  return (
    //...
  )
}

const {isLoading,isError,isSuccess,mutate} = useMutation({
    mutationFn: async (newData) => insertNewData(newData),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['repoData'] });
    },
    onError: (error) => {
      console.log(error)
    }
  });

  const updateData = async (newData) => {
    mutate(newData);
  };

onMouseEnter={async () => {
  await queryClient.prefetchQuery({
    queryKey: ['character', char.id],
    queryFn: () => getCharacter(char.id),
    staleTime: 10 * 1000, // only prefetch if older than 10 seconds
  })
}}

  const { status, data, error, isFetching, isPreviousData } = useQuery({
    queryKey: ['projects', page],
    queryFn: () => fetchProjects(page),
    keepPreviousData: true,
    staleTime: 5000,
  })

  const {
    status,
    data,
    error,
    isFetching,
    isFetchingNextPage,
    isFetchingPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
  } = useInfiniteQuery(
    ['projects'],
    async ({ pageParam = 0 }) => {
      const res = await axios.get('/api/projects?cursor=' + pageParam)
      return res.data
    },
    {
      getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined,
      getNextPageParam: (lastPage) => lastPage.nextId ?? undefined,
    },
  )

import { ReactQueryDevtools } from 'react-query/devtools'

<ReactQueryDevtools initialIsOpen={false} />