react-query使用

usequery

 

const { isPending,isLoading, error, data } = useQuery({
   //返回当前请求的状态，错误信息，以及返回的数据
    queryKey: ['repoData'],
   //【必填】，自定义查询的键，类型为数组，也可以存放变量，[repoData,id],当id发生变化时，会自动请求接口
    queryFn: () =>
   //【必填】，查询将用于请求数据的函数。

      fetch('https://api.github.com/repos/TanStack/query').then(
        (res) => res.json(),
      ),
    enabled：true,//开启自动查询
  })

 加入泛型使用

export function useQuery<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>

• TQueryFnData：从 返回的类型。在上面的示例中，它是 .queryFnGroup[]
• TError：预期从 . 在示例中。queryFnError
• TData：我们的财产最终将拥有的类型。仅当使用该选项时才相关，因为这样属性可能与返回的内容不同。否则，它将默认为任何返回。dataselectdataqueryFnqueryFn
• TQueryKey：我们的类型，仅当您使用传递给您的 .queryKeyqueryKeyqueryFn