组件内部的 Apollo 状态管理答案

【问题标题】：Apollo state management inside a component组件内部的 Apollo 状态管理
【发布时间】：2021-05-09 22:08:11
【问题描述】：

非常感谢您来到这里。我是 Apollo 和 React 的新手，我一定不明白这里的逻辑，所以请多多包涵

在我的主页 index.js 上，我正在像这样初始化 Apollo：

export const getStaticProps = async () => {
  const apolloClient = initializeApollo();
  await apolloClient.query({
    query: GET_ALL_COUNTRIES_MAIN,
    variables: {
      offset: 0,
      limit: 30,
    },
  });

  return {
    props: { initialApolloState: apolloClient.cache.extract() },
    revalidate: 1,
  };
};

并调用组件 <TotalCountriesMain />，然后渲染我所有的卡片。这完美无缺。

在这个组件内部，我想fetchMore 以便我的其他结果附加到旧状态。所以我首先在“index.js”中尝试了它，以确保它确实有效。但是每当我在里面调用 fetchMore 方法时，它都会给我这个错误： Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

如何防止这种情况发生？

我将在下面的组件TotalCountriesMain 中向您展示我在做什么：

const [limit, setLimit] = useState(30);
const { data, error, loading, fetchMore, networkStatus } = useQuery(
    GET_ALL_COUNTRIES_MAIN_NEW,
    {
      notifyOnNetworkStatusChange: true,
      variables: {
        offset: 0,
        limit,
      },
    }
  );

  if (!data || !data.globaldatasortednew) return <CircularProgress />;

{data.globaldatasortednew
          ? data.globaldatasortednew.map((country, index) => {
              return (
                          ... // mapping over the cards
  )

        <Button
          onClick={() => {
            const currentLength = data.globaldatasortednew.length;
            fetchMore({
              variables: {
                offset: currentLength,
                limit: 50,
              },
            }).then((fetchMoreResult) => {
              setLimit(
                currentLength + fetchMoreResult.data.globaldatasortednew.length
              );
            });
          }}
        >
          Show more countries
        </Button>

我跳过了一些我认为不相关的代码部分。情况是这样的：

每当我单击按钮时，都会出现错误消息。我应该以某种方式倾听我的数据的变化吗？我应该创建一个新状态，例如 const [allCountries, setAllCountries] = useState(initialData);，然后创建一些函数来设置所有国家/地区吗？这样做时我应该告诉 Apollo 缓存吗？

在这种情况下最好的方法是什么？

感谢您的建议！

【问题讨论】：

当您有条件地渲染钩子时，通常会发生该错误。您能否为您的组件添加其余代码？

标签： javascript reactjs state next.js apollo

【解决方案1】：

正如 cmets 中所述，您收到错误是因为某些钩子正在有条件地呈现。

您不能调用hooks inside loops, conditions, or nested functions，您需要在组件的顶层调用它们。这允许 React 通过确保每次组件呈现时以相同的顺序调用钩子来正确保留钩子的状态。

【讨论】：