有没有更高效的方法使用graphql和react调用多个api

Question

我正在使用 GraphQL 并在客户端项目上做出反应，但我没有使用像 Redux 这样的状态管理系统

我已将 api 调用组织到自定义挂钩文件中，如下所示

  const [getSomeData, { data: getSomeDataData, loading: getSomeDataLoading, error: getSomeDataError }] = useLazyQuery(
    GET_SOME_DATA2,
    {
      client: dataClient,
      fetchPolicy: "cache-and-network",
      nextFetchPolicy: "cache-first",
    }
  );
  return {
    getSomeData,
    getSomeDataData,
    getSomeDataLoading,
    getSomeDataError,
  };
}

export default function useGetSomeData() {
  const [getSomeData2, { data: getSomeData2, loading: getSomeDataLoading2, error: getSomeDataError2 }] = useLazyQuery(
    GET_SOME_DATA,
    {
      client: dataClient,
      fetchPolicy: "cache-and-network",
      nextFetchPolicy: "cache-first",
    }
  );
  return {
    getSomeData2,
    getSomeDataData2,
    getSomeDataLoading2,
    getSomeDataError2,
  };
}

当将我的数据导入到组件时，我发现自己使用了大量 useEffects 来保持 api 调用/状态像这样更新

useEffect(()=>{
getSomeData({
variables})
},[])
useEffect(()=>{
getSomeData2({
variables})
},[])

 useEffect(()=>{

if( getSomeDataData2 && !getSomeDataLoading2 && !getSomeDataError2){
setState(getSomeDataData2?.data)
}
},[getSomeDataData2 ,getSomeDataLoading2 ,getSomeDataError2])

useEffect(()=>{

if( getSomeDataData && !getSomeDataLoading && !getSomeDataError){
setState(getSomeDataData2?.data)
}
},[getSomeDataData ,getSomeDataLoading ,getSomeDataError])

我认为我过度使用使用效果，并且我想限制每个组件的重新渲染数量

确实将每个 use Effect 拉入其自己的函数，然后调用一个 useEffect 中的每个函数，这是一种更好的做法

getSomeData2({
variables})
}

const fetchData2 = () => {
getSomeData2({
variables})
}

useEffect(()=>{
fetchData()
fetchData2()
},[])

 useEffect(()=>{

if( getSomeDataData2 && !getSomeDataLoading2 && !getSomeDataError2){
setState(getSomeDataData2?.data)
}
},[getSomeDataData2 ,getSomeDataLoading2 ,getSomeDataError2])

useEffect(()=>{

if( getSomeDataData && !getSomeDataLoading && !getSomeDataError){
setState(getSomeDataData2?.data)
}
},[getSomeDataData ,getSomeDataLoading ,getSomeDataError])

Answer 1

1. Apollo 客户端返回的数据是状态。您很少需要另一种状态管理方法。
2. 将

   useQuery

   包裹在

   useEffect

中没有任何好处
3. 一个 GraphQL 请求可以运行多个 查询，例如：

query myQuery($arg1: String!, $arg2: String!, $arg3: Int!) {
  query1(arg1: $arg1) {
    field11
    field12
  }
  query2(arg2: $arg2, arg3: $arg3){
    field21
    field22
  }
}

4. useLazyQuery

   通常在用户界面操作触发查询但在安装组件时未加载来自该查询的数据时使用

5. useQuery

   通常用于组件在挂载时需要加载数据的情况

6. useState

   通常用于保存用户交互式修改的值，然后这些状态值用作 GraphQL 查询中的变量
7. 查询的

   refetch

   输出可以由用户操作触发以重新运行查询。此函数允许在重新获取期间使用不同的变量和/或缓存策略。