在react项目中使用react-query

一、`react query`基本介绍

1、官网地址
2、安装依赖包
```
npm i react-query
```

3、在react项目的入口文件中配置

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClient, QueryClientProvider } from 'react-query';
import axios, { AxiosResponse } from 'axios';

// 简单设置axios的拦截
axios.interceptors.response.use((response: AxiosResponse) => response.data);

const queryClient = new QueryClient();

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

reportWebVitals();

4、在组件中使用useQuery来查询数据

import React from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';
import { Test1 } from './Test1';

function App() {
  const query = useQuery('activity', () => axios.get('https://xxx/activity'));
  console.log(query, 'app');
  return (
    <div className='App'>
      <h1>测试</h1>
    </div>
  );
}

export default App;

5、刷新浏览器
6、关于返回的参数介绍
- status
- data成功的数据
- isLoading
- isSuccess
- isError
- isIdle
- refetch: 手动触发方法

二、关于`useQuery`的介绍

1、上面演示了，这个钩子函数用于查询数据的，总共有三个参数
- 第一个参数类似Id的意思，只能唯一的
- 第二个参数是一个函数
- 第三个可选参数

2、默认是页面加载的时候就触发，如果你想点击事件的时候触发，那么就在第三个参数中加上

{
  enabled : false
}

import React from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';

function App() {
  const query = useQuery('activity', () => axios.get('http://localhost:7000/user/user_list'), { enabled : false});
  console.log(query, 'app');
  return (
    <div className='App'>
      <h1 onClick={() => query.refetch()}>测试</h1>
    </div>
  );
}

export default App;

3、关于参数的传递，参考分页文档

const activityApi = ({ pageSize, pageNumber }: { pageSize: number; pageNumber: number }) => {
  console.log(pageSize, pageNumber, '传递的参数');
  return axios.get(`http://localhost:7000/user/user_list?pageSize=10&pageNumber=${pageNumber}`);
};

  // 使用
	const [pageSize, setPageSize] = useState<number>(10);
  const [pageNumber, setPageNumber] = useState<number>(1);
  const params = {
    pageSize,
    pageNumber,
  };
  // 第一个参数表示当参数变动的时候就会重新获取数据
  const query = useQuery(['activity', params], () => activityApi(params));
  console.log(query, 'app');

三、对于别的页面要获取已经缓存的数据

1、一个页面上定义的请数据

const query = useQuery('activity', () => axios.get('http://localhost:7000/user/user_list'));

2、另外一个页面中根据key来获取数据，如果key是一个数组的话就获取不到

import { useQueryClient } from 'react-query';

const queryClient = useQueryClient();
const getActivity = async () => {
  console.log(queryClient.getQueryData('user'), '获取数据');
}

四、对于增删改的操作使用`useMutation`

1、根据官网来新增数据

import { useQueryClient, useMutation } from 'react-query';
import axios from 'axios';

...
const mutation = useMutation((newTodo: { username: string; password: string }) => axios.post('http://localhost:7000/user/register', { ...newTodo }));
  const getActivity = async () => {
    console.log(queryClient.getQueryData('activity'), '获取数据');
  }

  const addUserHandler = () => {
    mutation.mutate({username: '李四', password: '123456'});
  }
...

2、添加成功的时候使用刷新接口的方法刷新获取列表的接口

import React from 'react';
import { useQueryClient, useMutation } from 'react-query';
import axios from 'axios';

const createUser = async (userInfo: { username: string; password: string }) => {
  return await axios.post('http://localhost:7000/user/register', { ...userInfo });
};

export const Test1: React.FC = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation((userInfo: { username: string; password: string }) => createUser(userInfo), {
    onSuccess(data) {
      console.log(data, '注册成功');
      // 会重新请求一次列表数据
      queryClient.invalidateQueries('user');
    },
  });

  const addUserHandler = () => {
    mutation.mutate({ username: '李四2', password: '123456' });
  };
  return (
    <>
      <button onClick={addUserHandler}>添加用户</button>
    </>
  );
};

在react项目中使用react-query

一、react query基本介绍

二、关于useQuery的介绍

三、对于别的页面要获取已经缓存的数据

四、对于增删改的操作使用useMutation

一、`react query`基本介绍

二、关于`useQuery`的介绍

四、对于增删改的操作使用`useMutation`