next.js Apollo客户端-数据到达时,使用查询不会重新呈现

hsvhsicv  于 2023-05-06  发布在  其他
关注(0)|答案(1)|浏览(123)

我正在开发一个Nextjs应用程序。
应用程序使用graphql从服务器获取数据。
服务器是postgraphile服务器。
我用graphql-codegen生成Apollo-clinethooks
我遇到以下问题:
useQuery请求数据成功,数据显示在浏览器的网络选项卡中,但钩子不会重新呈现数据。
挂钩状态保持不变:{data: undefined, error: undefined, loading: true}.
如果我保存了一个文件,并且发生了一个热重载,钩子将以更新后的状态触发:

{data: some_data, error: undefined, loading: false}

我尝试根据这个GitHub问题将apollo-client更改为几个不同的版本:https://github.com/apollographql/apollo-client/issues/9602什么都没做。
我尝试调试node_module本身,但没有发现问题。
我尝试将fetchPolicy设置为cache-first,network-first,cache-and-network,,但没有任何效果。
唯一起作用的是调用提供者组件中的钩子。我不知道为什么
有人熟悉这个问题吗?也许有更干净的解决方案。
我猜这和该高速缓存有关。
这是useQuery钩子:

const { data: primaryRunsData, loading } = usePrimaryRunsQuery();

Graphql查询

query PrimaryRuns(
  $first: Int = 10
  $filter: ShellRunFilter = {
    run: { id: { equalTo: "4acf2d7c-9a70-42f6-9fb7-bd7cb9e3c182" } }
  }
) {
  shellRuns(
    first: $first
    filter: $filter
    orderBy: MULTILATERAL_TRADE_POPULATIONS_PREPARATION_BY_RUN_ID__EXECUTION_TIME_ASC
  ) {
    nodes {
      run {
        ...ShellRunData
      }
      shell {
        name
        shellRunsList(filter: { executionCandidate: { equalTo: false } }) {
          run {
            ...ShellRunData
          }
        }
      }
    }
    totalCount
  }
}
xa9qqrwz

xa9qqrwz1#

问题是Provider组件中的useEffect调用了两个设置状态的异步函数。在注解掉第二个调用之后,useQuery状态正确更新了。
此外,setter函数中还有对clearCache的调用。其删除先前在网络中返回的任何数据。

useEffect(() => {
const lastActingAs = Number(localStorage.getItem(ACTING_AS_KEY));
if (!actingAs && availableOrgs) {
// async  
setActingAs(isActingAsValid ? lastActingAs : availableOrgs[0].id, true);
}
if (!groupedActingAs && orgTreeData) {
  //async
  setActingAs(
    isGroupedActingAsValid ? lastActingAs : user.parentOrg,
    true,
    setGroupedActingAs,
  );
}
}, [availableOrgs, orgTreeData]);

  const setActingAs = async (
orgId: number,
keepQuery?: boolean,
setActinAsOrg: ActingAsSetter = _setActingAs,
) => {
try {
  await axios(setActingAsApi(orgId));
  await client.clearStore();
  clearCache();
  setActinAsOrg(orgId);
  localStorage.setItem(ACTING_AS_KEY, String(orgId));
  if (!keepQuery) {
    resetQueryParams();
  }
} catch (error) {
  console.log('helo', error);
}
};

不知道为什么它会影响useQuery钩子。有人能解释一下吗

相关问题