Как сделать недействительным кеш реле после мутации

Question

Я собираю небольшое внутреннее веб-приложение с помощью React/Relay/GraphQL, чтобы ознакомиться с этим стеком. По сути, он отслеживает аналитику списка "активных" видео. Единственная мутация - заменить список активных идентификаторов видео новым списком. Проблема заключается в том, что после замены идентификаторов, ретранслятор продолжает доставлять старый список идентификаторов вместо новых.

Я не смог понять, как управлять магазином, который передан commitMutation()"s updater а также optimisticUpdater Обратные вызовы. Мне просто нужно очистить сохраненный список активных видео, чтобы он знал, что нужно вызвать новое видео, или перезапустить запрос graphql, чтобы обновить кеш.

В частности, мне нужно очистить результаты этого запроса:

const ActiveVideosQuery = graphql`
    query App_ActiveVideos_Query {
        activeVideos {
            ...SetActiveVideosPage_activeVideos
            ...VideoList_activeVideos
        }
    }
`

Мутация (TypeScript):

const { commitMutation, graphql } = require('react-relay')


const mutation = graphql`
    mutation SetActiveVideosMutation($input: SetActiveVideosInput!) {
        setActiveVideos(input: $input) {
            clientMutationId
        }
    }
`

let nextClientMutationId = 0

function commit(environment, ids: string[]) {
    const clientMutationId = nextClientMutationId++

    return commitMutation(environment, {
        mutation,
        variables: { input: { ids, clientMutationId } },
    })
}


export default { commit }

И схема:

type Channel {
  id: ID!
  name: String!
}

type Mutation {
  setActiveVideos(input: SetActiveVideosInput!): SetActiveVideosPayload
}

type Query {
  activeVideos: [Video]!
}

input SetActiveVideosInput {
  ids: [ID]!
  clientMutationId: String!
}

type SetActiveVideosPayload {
  clientMutationId: String!
}

type Video {
  id: ID!
  active: Boolean!
  details: VideoDetails
  statsByAge(seconds: Int!): [VideoStats]!
}

type VideoDetails {
  title: String!
  description: String!
  thumbnailURL: String!
  publishedAt: String!
  channel: Channel!
}

type VideoStats {
  videoID: ID!
  recordedAt: String!
  views: String!
  likes: String!
  dislikes: String!
  favorites: String!
  comments: String!
}

Answer 1

Вы будете хотеть использовать Реле "Окружающая среда".

"Среда" Relay связывает воедино конфигурацию, кэш-память и обработку сети, необходимые для работы Relay.

Вопрос: Почему нет команды Relay.reset(), которая просто стирает ВСЕ из приложения?

Ответ: потому что гораздо проще просто создать новую копию Relay.Environment(), а не пытаться убедиться, что вы очистили все в глобальном синглтоне Relay.Store.

РЕДАКТИРОВАТЬ: в ответ на ваш комментарий;

В настоящее время Relay предлагает очень грубый контроль над тем, когда данные перезагружаются: primeCache по умолчанию выполняет запросы с использованием данных в памяти, в то время как forceFetch обходит кеш и полностью восстанавливает данные с сервера. Опять же, на практике это хорошо работает для большинства наших случаев использования.

Проблема с перепрошивкой и контролем кэширования

Что касается удаления кэша, важно понимать, что Relay принципиально отличается от многих типичных кэшей. В то время как типичные кэши хранят независимые пары ключ / значение, Relay кэширует график взаимосвязанных объектов. Мы подробно рассмотрим последствия этого в Thinking in GraphQL. На практике это означает, что простые подходы к удалению из кэша, такие как TTL или LRU, могут иметь неинтуитивные последствия. Например, продукты обычно заботятся о запросах, а в кеше хранятся нормализованные записи. Если даже одна запись будет удалена из кэша, это может привести к тому, что весь запрос будет фактически "пропущен" и его необходимо будет повторно выполнить. Кроме того, зависимости данных отдельных частей приложения могут перекрываться, так что они не согласны с допустимой устареванием данных.