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

Question

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

我有两种使用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,
});

此方法的问题是任务（子级）组件未订阅任何高速缓存更改，并且在更新高速缓存时未重新呈现该组件。

还有其他解决方案吗？

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/