Блог

Главная - Вопросы по программированию - Как выполнить запрос из кэша Apollo, не имея запроса на ROOT_QUERY

Как выполнить запрос из кэша Apollo, не имея запроса на ROOT_QUERY

#reactjs #graphql #apollo #react-apollo #apollo-client

#reactjs #graphql #apollo #реагировать-apollo #apollo-клиент

Вопрос:

Мне нужно реализовать список вложенных элементов (задач), каждая задача должна быть доступна для редактирования, например

введите описание изображения здесь

У меня есть два варианта того, как это сделать с помощью React / Apollo / GraphQL:

1. Используйте запрос для каждой задачи отдельно

Это работает хорошо, но много запросов для каждой задачи отдельно

2. 2 запроса: 1 для извлечения всех задач с сервера, 1 для получения одной из КЭША

Моя идея заключается в том, что где-то в родительском компоненте я бы извлек все доступные задачи, например:

 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,
});

Проблема с этим подходом заключается в том, что компонент Task (дочерний) не подписан на какие-либо изменения кэша, и при обновлении кэша компонент не повторяется.

Любые другие решения?

Комментарии:

1. apollographql.com/docs/react/local-state/local-resolvers/…

2. это что-то совершенно другое и устаревшее @xadm

3. Привет, означает ли «дочерние элементы» в типе «Задача» «taskWithNestedChildren»? Если да, вы можете попробовать это: hashinteractive.com/blog/graphql-recursive-query-with-fragments Если вы все еще не можете понять это, пожалуйста, сделайте его воспроизводимым с помощью github.com/apollographql/react-apollo-error-template или codesandbox.io/s/github/apollographql /… и я был бы рад помочь вам еще больше.

Ответ №1:

1- используйте @client следующим образом в запросе, чтобы он использовал кеш

 const TASK = gql`
    query Task($taskId: String!) {
        task(taskId: $taskId)@client {
            _id
            name
            children {
                _id
            }
        }
    }
`;

2- также добавьте политики типов, чтобы они определяли логику запроса задачи, поскольку ее нет в корневом запросе

подробнее об этом читайте здесь https://www.apollographql.com/docs/react/caching/cache-configuration /