React_query语法

react query

1.useQuery

https://react-query.tanstack.com/guides/queries

  const { isLoading } = useQuery(['resumeTags', id], () => {
    return client('getCandidateTags', {
      method: 'POST',
    }).then((res) => {
      console.log(res);
      setAllCandidateTags(res.data.res);
      const selectedCandidateTags = res.data.res.filter((item, index) => {
        return item.selected === true;
      });
      setCandidateTags(selectedCandidateTags);
    });
  });

2.useMutations

https://react-query.tanstack.com/guides/mutations
onMutate：传入参数时调用
onSuccess：成功时调用
AddTag.mutate:方法挂载，通过mutate(reg)传入的参数会跑到onMutate方法中，可进行验证操作，在成功调用后调用onsuccess方法
AddTag.isLoading:判断函数是否是在加载中，用于当在网络较差环境中制作骨架屏，加载中禁止进行其他操作。

const AddTag = useMutation(
    async (value) => {
      if (value === '') {
        enqueueSnackbar('标签不得为空', {
          variant: 'error',
          anchorOrigin: { horizontal: 'center', vertical: 'top' },
        });
        return;
      } else {
        const res = await client('addCandidateTags', {
          method: 'POST',
          data: {
            tagValue: addTagValue,
            id: id,
          },
        });
        if (res.code === 0) {
          console.log(res);
          return res.data;
        } else {
          console.log(res);
        }
      }
    },
    {
      onSuccess: (data, variables, context) => {
        if (variables !== '') {
          setAddTagValue('');
          enqueueSnackbar('标签添加成功', {
            variant: 'success',
            anchorOrigin: { horizontal: 'center', vertical: 'top' },
          });
          queryClient.invalidateQueries(['resumeTags', id]);
        }
      },
      onError: (error, variables, context) => {
        console.log(error, variables, context);
        enqueueSnackbar('标签添加失败', {
          variant: 'error',
          anchorOrigin: { horizontal: 'center', vertical: 'top' },
        });
      },
      onMutate: (variables) => {
        if (variables === '') {
          return;
        }
        console.log(variables);
      },
    },
  );

3.useQueryClient

通过invalidateQueries里的参数使得usequery更新（usequery第一个参数要和传入的参数一致）

 import { useQueryClient } from 'react-query'
 
 const queryClient = useQueryClient()
 
 queryClient.invalidateQueries(['name']);