Reactjs 从Apollo客户端缓存查询嵌套对象失败,返回“0”;Can';在根“查询对象”上找不到字段[field];
我的React客户端使用查询检索相册ID为1的相册的所有照片:Reactjs 从Apollo客户端缓存查询嵌套对象失败,返回“0”;Can';在根“查询对象”上找不到字段[field];,reactjs,graphql,apollo,apollo-client,graphql-js,Reactjs,Graphql,Apollo,Apollo Client,Graphql Js,我的React客户端使用查询检索相册ID为1的相册的所有照片: const GET_ALBUM_PHOTOS = gql` query($albumId: Int!) { photos(albumId: $albumId) { id src thumbnail ... } } `; 当我打开Apollo Chrome扩展时,我可以看到缓存的记录: photos({"albumId":"1&qu
const GET_ALBUM_PHOTOS = gql`
query($albumId: Int!) {
photos(albumId: $albumId) {
id
src
thumbnail
...
}
}
`;
当我打开Apollo Chrome扩展时,我可以看到缓存的记录:
photos({"albumId":"1"}):
0:{"__ref":"PhotoType:6100"}
1:{"__ref":"PhotoType:1284"}
2:{"__ref":"PhotoType:2014"}
3:{"__ref":"PhotoType:2745"}
4:{"__ref":"PhotoType:2425"}
...
现在,当我单击其中一张显示的照片时,我在clickhandler中获得photoId
,然后,我想将照片对象上的本地字段isSelected
设置为true
我将客户端的PhotoType扩展到了resolvers.js
:
export const typeDefs = gql`
extend type Query {
...
}
extend type Photo {
isSelected: Boolean!
}
`;
在显示特定相册照片网格的组件中,我尝试检索由其id指定的照片,如下所示:
const obtainedPhotoId = 1089;
const photo = client.readQuery({
query: GET_PHOTO,
variables: { photoId: obtainedPhotoId },
});
其中GET_PHOTO
查询定义为:
const GET_PHOTO = gql`
query($photoId: Int!) {
photo(id: $photoId) {
id
src
thumbnail
...
}
}
`;
(顺便说一句,这两个查询在服务器上都能完美地工作。我还确保我不会忘记变量
对象。)
现在,问题是Apollo抛出了一个MissingFieldError:“在根查询对象上找不到字段'photo'”
,这是有意义的,因为photo对象位于带有键photos({“albumId”:“1”)的列表中
。根据我在文件上读到的内容和官方回购协议问题跟踪程序上的各种评论,我可能需要定义缓存重定向。我试过这个(还有很多其他的方法):
但错误依然存在。我还尝试定义解析器并将其添加到Apollo构造函数:
Photo: {
isSelected: (photo, _, { cache }) => {
const queryResult = cache.readQuery({
query: GET_PHOTO,
variables: { photoId: photo.id },
});
if (queryResult) {
return queryResult.photo;
}
return false;
},
},
没有变化
我不知道如何调试它,因为无论我如何更改解析器或重定向,我都会顽固地得到相同的错误消息。我还尝试运行原始查询以按相册检索照片,即首先将这些对象放入缓存的查询。令人惊讶的是,它告诉我它找不到查询posts
。文档相对来说是不确定的,因为对于这个特定的(但被认为是非常常见的)用例没有具体的例子。我在这里做错了什么
编辑:
我忘了提到我正在使用Apollo客户端v3。深入研究之后,我认为CacheRedirects
现在已经过时了,应该是typePolicies
,但我仍然没有找到一种方法来实现这一点。更新鲜的解决方案:
错误指向缺少扩展类型查询{photo(photoId:ID!):photo-使用“仅cach”获取策略…但这是字段策略的另一种方法。更新鲜的解决方案:
错误指向缺少
扩展类型查询{photo(photoId:ID!):photo
-使用“仅cach”获取策略…但这是字段策略的另一种方法。这似乎是前进的方向。但是,使用FieldPolicys时,我遇到的问题是它找不到“悬空”照片对象的引用。我尝试使用keyFields功能将对象表面化到顶层(在更改的键下),但没有拾取。我尝试使用photo(photoId:Int!)扩展typeDefs
下的查询:Photo
但它仍然无法在根_查询对象上找到“Photo”字段。这样做?这似乎是前进的方向。但是,使用FieldPolicys时,我遇到了一个问题,即它找不到照片对象的“悬空”引用。我尝试使用keyFields功能将对象表面化到顶层(在更改的键下)但是它没有被拾取。我尝试用photo(photoId:Int!):photo扩展typeDefs
下的Query
,但它仍然找不到根查询对象上的“photo”字段。这样做?
Photo: {
isSelected: (photo, _, { cache }) => {
const queryResult = cache.readQuery({
query: GET_PHOTO,
variables: { photoId: photo.id },
});
if (queryResult) {
return queryResult.photo;
}
return false;
},
},