如何解决如何从Apollo缓存中查询没有对ROOT_QUERY的查询
我需要实现一个嵌套项目(任务)的列表,每个任务都应该是可编辑的,就像这样
我有两种使用React / Apollo / GraphQL的方法:
1。对每个任务分别使用useQuery
这很好用,但是每个任务分别有很多查询
2。 2个查询:1从服务器获取所有任务,1从CACHE获取一个任务
我的想法是,我将在父组件的某处获取所有可用的任务,如下所示:
const TASKS_NESTED = gql`
query TaskWithNestedChildren($taskId: String!) {
taskWithNestedChildren(taskId: $taskId) {
_id
name
children {
_id
}
}
}
`;
const ParentComp = () => {
const { data } = useQuery(TASKS_NESTED,{
variables: { taskId: parentTaskId },});
这会将所有任务写入缓存
在我的子组件中,我会像这样从缓存中获取任务的数据
const TASK = gql`
query Task($taskId: String!) {
task(taskId: $taskId) {
_id
name
children {
_id
}
}
}
`;
const Task = ({...}) => {
const { data,loading } = useQuery(TASK,{
variables: { taskId },fetchPolicy: 'cache-only',});
它不会从缓存中加载每个任务,它说:
在ROOT_QUERY对象上找不到字段“任务”
这是我在Node.js方面的架构
type Query {
task(taskId: String!): Task
taskWithNestedChildren(taskId: String!): [Task]
}
这意味着taskWithNestedChildren
返回任务对象数组,而task
返回一个Task对象
可能的解决方案1
在子组件中,使用client.readFragment
从缓存中获取任务数据。
const task = client.readFragment({
id: `Task:${taskId}`,fragment: TASK_FRAGMENT,});
此方法的问题是任务(子级)组件未订阅任何高速缓存更改,并且在更新高速缓存时未重新呈现该组件。
还有其他解决方案吗?
解决方法
1-在查询中按以下方式使用 @client ,以便它使用缓存
const TASK = gql`
query Task($taskId: String!) {
task(taskId: $taskId)@client {
_id
name
children {
_id
}
}
}
`;
2-还添加了 typePolicies ,因此它定义了查询任务的逻辑,因为它不在根查询中
在此详细了解 https://www.apollographql.com/docs/react/caching/cache-configuration/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。