Почему обновления моего кэша Apollo не отражаются в моих запросах? - PullRequest
0 голосов
/ 21 сентября 2019

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

Возникла проблема, когда кэш обновляется, но последующие запросыв кеш возвращаются устаревшие данные.Я столкнулся с этой проблемой в компонентах React, использующих хук useQuery, а также в Apollo DevTools, который я буду использовать для демонстрации ниже:

У меня есть эта мутация и запрос, заданные в моих резольверах (я использую Typescript):

const resolvers = {
  Mutation: {
    storeLetterDraft: (_root, args: { type: string, details: LetterSending }, { client, getCacheKey }) => {
      const id = getCacheKey({
        __typename: "LetterDraft",
        id: args.type,
      });

      const data = { ...args.details };

      client.writeFragment({
        data,
        id,
        fragment: LETTER_SENDING_FRAGMENT,
      });
    },
  },
  Query: {
    letterDraft: (_root, args: { type: string }, { client, getCacheKey }) => {
      // I HAVE TRIED A DEBUGGER STATEMENT HERE
      const id = getCacheKey({
        __typename: "LetterDraft",
        id: args.type,
      });

      return client.readFragment({
        id,
        fragment: LETTER_SENDING_FRAGMENT,
      });
    },
  },
}

Мой фрагмент:

export const LETTER_SENDING_FRAGMENT = gql`
  fragment DraftLetterSending on LetterDraft {
    date
    firstName
    lastName
    addressLine1
    addressLine2
    addressTown
    addressCounty
    addressPostcode
  }
`;

Я инициализирую кэш с помощью:

cache.writeData({
  data: {
    letterDrafts: [{
      __typename: "LetterDraft",
      id: "CREATE",
      addressCounty: "Northamptonshire",
      addressLine1: "1 Watkin Terrace",
      addressLine2: "",
      addressPostcode: "NN1 3ER",
      addressTown: "Northampton",
      date: "2019-11-01",
      firstName: "d",
      lastName: "d",
    }],
  },
});

Моя мутация выглядит так:

export const storeCreateLetterSendingMutation = gql`
  mutation StoreCreateLetterSending($details: LetterSending!) {
    storeLetterDraft(type: "CREATE", details: $details) @client
  }
`;

До мутации кэш в Apollo DevTools выглядит так, как и ожидалось:

Cache before mutation

И запрос возвращается, как и ожидалось:

Query before mutation

После выполнения мутации кэш обновляется:

Cache after mutation

Однако при запускезапрос снова приводит к устаревшим данным:

enter image description here

Интересно, если я помещу оператор отладчика в приведенную выше часть (I HAVE TRIED A DEBUGGER STATEMENT HERE), то кажется, чтораспознаватель запросов запускается в первый раз, но не во второй раз, поэтому кажется, что запрос кэшируется - даже если это кеш, который я обновляю!Поэтому я думаю, что проблема в том, что запрос не запускает распознаватель впоследствии.

1 Ответ

0 голосов
/ 22 сентября 2019

Я пропустил это из документации (на веб-сайте Apollo есть различные места, в которых подробно описан локальный кэш и @ client.

https://www.apollographql.com/docs/react/essentials/local-state/#forcing-resolvers-with-clientalways-true

При использовании возможностейКэш для локальных и удаленных результатов может быть очень полезен во многих случаях, он не всегда подходит наилучшим образом. Возможно, мы захотим использовать локальный преобразователь для вычисления динамического значения, которое необходимо обновлять при каждом запросе, в то время как наВ то же время продолжайте использовать кэш для сетевых частей нашего запроса. Для поддержки этого варианта использования директива Apollo Client @client принимает аргумент всегда, который при значении true будет гарантировать, что связанный локальный преобразователь запускается при каждом запросе.

...