如何从 Apollo 缓存中查询没有 ROOT_QUERY 上的查询

Question

我需要实现一个嵌套项目（任务）列表，每个任务都应该是可编辑的，像这样

我有两种使用 React/Apollo/GraphQL 的变体：

1.分别为每个任务使用查询

这很好用，但每个任务都有很多单独的查询

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 返回一个任务对象

可能的解决方案 1 在子组件中使用client.readFragment从缓存中获取任务数据。

const task = client.readFragment({
    id: `Task:${taskId}`,
    fragment: TASK_FRAGMENT,
});

这种方法的问题是任务（子）组件没有订阅任何缓存更改，并且在更新缓存时不会重新渲染组件。

还有其他解决方案吗？

Answer 1

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/