每次加载页面时都会触发 Graphql 查询如何保存在缓存中？

如何解决每次加载页面时都会触发 Graphql 查询如何保存在缓存中？

我有一个网站，可以向用户展示不同类型的项目。我正在使用 Hasura、NextJS 和 Apollo 来实现这一目标。我现在遇到的问题是，每次我回到主页（在那里我展示我的项目）时，查询都会再次被触发，并且必须重新加载。我想将数据保存在我的缓存中，但我不知道该怎么做。

我现在就是这样做的：

我正在调用查询，当它完成加载时，我返回带有数据的 Home 组件。

const ProjectList = () => {
  const { loading,error,data } = useQuery(GET_PROJECTS);

  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    console.error(error);
    return <div>Error!</div>;
  }
  return <Home projects={data.projects} />;
};

export default withApollo({ ssr: true })(ProjectList);

在我知道的 home 组件中可以使用数据：

const Home = ({ projects }) => {
  // rest code...
}

我创建我的 apolloClient 如下：

export default function createApolloClient(initialState,headers) {
  const ssrMode = typeof window === 'undefined';
  let link;
  if (ssrMode) {
    link = createHttpLink(headers); // executed on server
  } else {
    link = createWSLink(); // executed on client
  }
  return new ApolloClient({
    ssrMode,link,cache: new InMemoryCache().restore(initialState),});
}

有没有什么办法可以把数据保存在缓存里，不用每次回到首页都等待加载状态？

解决方法

您可以使用 nextjs 的预构建功能。为此，您需要在 ProjectList.jsx 文件中调用 getStaticProps。在那里，您必须导入您的 apollo 客户端 以及您的查询，然后初始化客户端并执行查询：

export async function getStaticProps() {
  const apollo = require("../../../apollo/apolloClient"); // import client
  const GET_PROJECTS = require("../../../apollo/graphql").GET_PROJECTS; // import query
  const client = apollo.initializeApollo(); //initialize client

  const { data,error } = await client.query({
    query: GET_PROJECTS
  });

  if (!data || error) {
    return {
      notFound: true
    };
  }

  return {
    props: { projects: data.projects } // will be passed to the page component as props
  };
}