当变量更改时，Apollo 客户端缓存不会在查询时更新

Question

我对Next、GraphQL和Apollo完全陌生。我正在开发一个模仿twitter的东西作为练习。

索引页显示包含所有新帖子的用户提要。我正在执行一个查询返回一个对象" paginatedpost "它包含帖子和一个布尔值，如果有更多的帖子要获取(来决定是否"加载更多的帖子");按钮是否可见)。

如果您点击帖子的创建者(用户)，您将进入一个页面(ex:/user/8)，其中包含该用户的个人资料和他的所有帖子。我在服务器端加载这个页面，为了更好的SEO。我从url获取用户id，然后查询获取用户，然后查询获取他的帖子，其中包含一个his id变量

现在我的问题是，如果我去到一个用户的配置文件，查询会被apollo缓存，很酷。当我访问另一个用户的配置文件时，显示给我的帖子来自前一个用户(来自缓存)。我试着添加fetch-policy: no-cache，但如果我喜欢一个帖子，缓存不会自动更新。这看起来很奇怪，因为显示在用户配置页面顶部的用户通常会发生变化。

下面是我在前端用户页面上使用的代码:

const {
data: postsData,
loading: postsLoading,
fetchMore: fetchMorePosts,
variables: postsVariables,
} = useUserPostsQuery({
notifyOnNetworkStatusChange: true,
skip: !userData?.user, // skip if no user id
variables: {
limit: 15,
userId: userData?.user?.id || -1,
},
});

创建apollo客户端函数:

const createApolloClient = (ctx: any) => {
let cookie = "";
if (isServer() && ctx) {
cookie = ctx.req.headers.cookie;
}
return new ApolloClient({
uri: "http://localhost:4000/graphql",
credentials: "include",
headers: {
cookie,
},
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
posts: {
keyArgs: [],
merge(
existing: PaginatedPosts | undefined,
incoming: PaginatedPosts
): PaginatedPosts {
return {
...incoming,
posts: [...(existing?.posts || []), ...incoming.posts],
};
},
},
userPosts: {
keyArgs: [],
merge(
existing: PaginatedPosts | undefined,
incoming: PaginatedPosts
): PaginatedPosts {
return {
...incoming,
posts: [...(existing?.posts || []), ...incoming.posts],
};
},
},
},
},
},
}),
});
};

如果您需要更多的信息，请告诉我。

Answer 1

我最终将userId添加到keyArgs(在创建阿波罗客户端函数中)。像这样:

const createApolloClient = (ctx: any) => {
let cookie = "";
if (isServer() && ctx) {
cookie = ctx.req.headers.cookie;
}
return new ApolloClient({
uri: "http://localhost:4000/graphql",
credentials: "include",
headers: {
cookie,
},
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
posts: {
keyArgs: [],
merge(
existing: PaginatedPosts | undefined,
incoming: PaginatedPosts
): PaginatedPosts {
return {
...incoming,
posts: [...(existing?.posts || []), ...incoming.posts],
};
},
},
userPosts: {
keyArgs: ["userId"], // right there
merge(
existing: PaginatedPosts | undefined,
incoming: PaginatedPosts
): PaginatedPosts {
return {
...incoming,
posts: [...(existing?.posts || []), ...incoming.posts],
};
},
},
},
},
},
}),
});
};