React Apollo: обновление кэша списков (с переменными) при добавлении нового элемента

Question

Мне трудно понять, как обновить список элементов (в кеше). Когда новый элемент создается с react-apollo,

<CreateItemButton /> компонент (в моем случае) не вложен в <ListItems /> составная часть. Из того, что я могу понять, мне нужно обновить кэш с помощью функции обновления в моем createItemButton <Mutation /> составная часть.

Проблема в том, когда я пытаюсь store.readQuery({query: GET_LIST_ITEMS, variables: ???}) чтобы получить текущий список элементов (чтобы добавить мой недавно созданный элемент), он может иметь переменные / фильтры (для разбивки на страницы, сортировки и т. д.).

Как мне узнать, какую переменную передать store.readQuery функция, есть ли что-то вроде "последних использованных переменных", или у вас есть какие-либо другие предложения о том, как решить эту проблему?

Answer 1

Это известная проблема Apollo, и команда работает над этим. Текущие варианты, которые у вас есть, можно найти в этом среднем посте.

Это также проблема удаления / обновления элемента, когда он есть в списке с фильтрами или нумерацией страниц.

Вот ссылка на открытый выпуск на Github об этом

Answer 2

Apollo теперь предоставляет новую директиву, которая позволяет игнорировать некоторые переменные при запросе кеша. Проверьте это здесь. Я использовал его, чтобы игнорировать мои меняющиеся параметры разбивки на страницы.

Answer 3

Кажется, это работает, но немного хакерский доступ к cache.watchesSet?:S

Хитрость заключается в том, чтобы получить доступ к переменным кэша для данного запроса, сохранить его и выполнить повторное получение с заданными переменными запроса. В моем случае после создания предмета:

export const getGraphqlCacheVariables = (queryName, cache) => {
  if (cache.watches) {
    const watch = [...cache.watches].find(w => !!w.query[queryName]);

    if (watch) {
      return watch.variables;
    }
  }
};

mutationupdate функция:

let variables;

const update = (cache, { data }) => {
  if (data && data.createTask && data.createTask.task) {
    variables = getGraphqlCacheVariables('GetTasks', cache);
  }
}

И refetchQueries функция:

const refetchQueries = () => {
      if (variables && Object.keys(variables).length > 0) {
        return [{ query: GET_TASKS, variables }];
      }
      return [];
}

Бот функции обновления и refetchQueries должны иметь доступ к variables переменная

Преимущество по сравнению с решением в статье Medium заключается в том, что вы не удаляете кэшированные данные для данного запроса (GET_TASKS) с разными переменными.