react-query从拒绝到拥抱

import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [starCount, setstarCount] = useState(0);

  useEffect(() => {
   //获取react-query的star数量
    axios
      .get("https://api.github.com/repos/tannerlinsley/react-query")
      .then((res) => {
        setstarCount(res.data.stargazers_count);
      })
      .catch((err) => {
        //处理错误
        console.log(err);
      });
  }, []);

  return <div>react-query获得了{starCount}颗星</div>;
}
复制代码

import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [starCount, setstarCount] = useState(0);
  const [loading, setloading] = useState(false); //声明loading状态
  const [isErr, setisErr] = useState(false); //声明错误状态

  useEffect(() => {
    setloading(true); //开始请求数据，loading设为true
    axios
      .get("https://api.github.com/repos/tannerlinsley/react-query")
      .then((res) => {
        setloading(false); //请求结束，loading设为false
        setstarCount(res.data.stargazers_count);
      })
      .catch((err) => {
        //处理错误
        setloading(false);
        setisErr(true); //设置isErr为true
        console.log(err);
      });
  }, [isErr]);

  const handleReload = () => {
    setisErr(false); //重置isErr为false，再次发送请求
  };

  if (loading) return <span>数据获取中...</span>;
  if (isErr) return <button onClick={handleReload}>重新获取数据</button>;

  return <div>react-query获得了{starCount}颗星</div>;
}

复制代码

import axios from "axios";
import { useQuery } from "react-query";

export default function App() {
  const { data, isLoading, error } = useQuery("getStar", () =>
    axios.get("https://api.github.com/repos/tannerlinsley/react-query")
  );

  if (isLoading) return "数据获取中...";

  if (error) return "发生错误: " + error.message;

  return (
    <div>react-query获得了{data.stargazers_count}颗星</div>
  );
}

复制代码

const returns = useQuery(queryKey, queryFn?,{
    enabled, //默认为true，表示自动请求，false的话则需要你手动
    retry, //请求失败后，请求的重试次数，也可以为boolean，true为无数次重试，false则不会重试
    refetchOnWindowFocus，//页面取得焦点时，重新获取数据，默认为true
    staleTime, //指定缓存时长，以毫秒为单位。
    ...
})

复制代码

const {
    data, //这个就是请求成功回来的数据
    isLoading, //true表示数据在获取的路上
    error,//错误对象，如果存在则包含相关的错误信息
    refetch，//这个还挺实用的，你可以在需要的地方或需要更新数据时调用，则会触发这个请求，比如enabled=false时
    ...
} = useQuery(queryKey, queryFn?,options?）
复制代码

//例子来自官网
function App() {
  //创建一条todo的mutation请求
  const mutation = useMutation(newTodo => {
    return axios.post('/todos', newTodo)
  })

  return (
    <div>
      {mutation.isLoading ? (
        'Adding todo...'
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>Todo added!</div> : null}

          <button
            onClick={() => {
              //主要看这里，mutate方法传递请求的参数，来创建一条新的todo
              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
            }}
          >
            Create Todo
          </button>
        </>
      )}
    </div>
  )
}
复制代码

//例子来自官网，有一定的修改。
import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { useQueryClient } from 'react-query';
import { ReactQueryDevtools } from "react-query/devtools"; //调试工具

const queryClient = new QueryClient();//创建实例，可以用该实例配置一些选项，具体看文档

export default function App() {
  return (
   //注入到Example里
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const queryClient = useQueryClient() //获取QueryClient实例
  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    fetch(
      "https://api.github.com/repos/tannerlinsley/react-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>{isFetching ? "Updating..." : ""}</div>
      {/* 指定key为repoData，可以该query重新获取数据 */}
      <button onClick={()=>queryClient.refetchQueries('repoData')}>重新获取</button>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
复制代码