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

Posted 2023-03-10

【中文标题】每次加载页面时都会触发 Graphql 查询。如何保存在缓存中？

【英文标题】：Graphql query is firing every time the page is loading. How to save in cache?

【发布时间】：2021-04-29 04:23:12

【问题描述】：

我有一个网站，可以向用户展示不同类型的项目。我正在使用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( s-s-r: true )(ProjectList);

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

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

我按以下方式创建我的 apolloClient：

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

有没有办法可以将数据保存在缓存中，这样就不用每次回到首页都等待加载状态了？

【参考方案1】：

您可以使用 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
  ;

【讨论】：

@Gho5d 当我尝试这个时，我收到以下错误：ReferenceError: XMLHttpRequest is not defined

你的 apolloClient 看起来怎么样？它有initializeApollo函数吗？

我发现了问题。我从 Firebase Storage 加载图像并给出错误。我删除了它们，现在它工作正常！我将研究制作一个 S3 存储桶来处理图像。

在这种情况下，您只需将文件放入存储桶并确保每个人都有权访问它们。如果我的回答有帮助，如果你能接受，我会很高兴;-)