每次加载页面时都会触发 Graphql 查询。如何保存在缓存中?
Graphql query is firing every time the page is loading. How to save in cache?
我有一个网站,可以向用户展示不同类型的项目。我正在使用 Hasura
、NextJS
和 Apollo
来实现这一点。我现在遇到的问题是,每次我回到主页(我展示我的项目的地方)时,查询都会再次被触发并且必须重新加载。我想将数据保存在我的缓存中,但我不知道该怎么做。
我现在是这样做的:
我正在调用查询,当它完成加载时,我 return 我的 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
};
}
我有一个网站,可以向用户展示不同类型的项目。我正在使用 Hasura
、NextJS
和 Apollo
来实现这一点。我现在遇到的问题是,每次我回到主页(我展示我的项目的地方)时,查询都会再次被触发并且必须重新加载。我想将数据保存在我的缓存中,但我不知道该怎么做。
我现在是这样做的:
我正在调用查询,当它完成加载时,我 return 我的 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
};
}