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

我有一个网站，在那里我向用户展示不同类型的项目。我正在使用哈苏拉、

NextJS

和阿波罗来实现这一点。我现在的问题是，每次我回到主页（在那里我显示我的项目）时，查询都会再次被触发，并且必须重新加载。我想把数据保存在缓存中，但我不知道怎么做

我现在就是这样做的：

我调用这个查询，当它完成加载时，我返回我的主组件和数据

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);

我创建的Apollo客户端如下所示：

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文件。在这里，您必须导入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
  };
}

---

@Gho5d当我尝试此操作时，会出现以下错误：

ReferenceError:XMLHttpRequest未定义

您的客户端看起来如何？它有InitializePollo函数吗？我发现了问题。我从Firebase存储中加载图像，这会导致错误。我删除了他们，现在它的工作很好！我将考虑制作一个S3存储桶来处理图像。在这种情况下，您只需将文件放入存储桶中，并确保每个人都有权访问它们。如果我的回答有帮助，那么如果你接受，我会很高兴；-）

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
  };
}