组件内部的 Apollo 状态管理

Question

非常感谢您来到这里。我是 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 缓存的吗？

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

感谢您的指教！

Answer 1

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

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

组件内部的 Apollo 状态管理

Apollo state management inside a component

javascript

state

apollo

reactjs

next.js