javascript - 变异后如何使Relay的缓存失效

Question

我正在使用 React/Relay/GraphQL 重建一个小型内部 Web 应用程序，以熟悉该堆栈。基本上，它监视“事件”视频列表的分析。唯一的变化是用新列表替换事件视频 ID 列表。 问题在于，替换 ID 后，Relay 继续传递旧的 ID 列表，而不是新的 ID 列表。

我无法弄清楚如何操作传递给 commitMutation() 的 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

您将想要使用The Relay "Environment" .

The Relay "Environment" bundles together the configuration, cache storage, and network-handling that Relay needs in order to operate.

Question :为什么没有一个命令 Relay.reset() 来简单地删除应用程序中的所有内容？

Answer :因为只实例化一个新的 Relay.Environment() 而不是尝试确保已清理全局单例 Relay.Store 上的所有内容要干净得多。

编辑:回应您的评论；

Relay currently offers very coarse-grained control of when data is refetched: primeCache defaults to fulfilling queries using in-memory data, while forceFetch bypasses the cache and refetches data in-full from the server. Again, in practice this has worked well for most of our use cases.

重新获取和缓存驱逐控制 view issue

Regarding cache eviction, it's import to understand that Relay is fundamentally different from many typical caches. Whereas typical caches store independent key/value pairs, Relay caches a graph of interconnected objects. We cover the ramifications of this extensively in Thinking in GraphQL. In practice, this means that simple approaches to cache eviction such as TTL or LRU may have unintuitive consequences. For example, products typically care about queries while the cache stores normalized records. If even a single record is evicted from the cache, it could cause an entire query to be effectively "missing" and need to be refetched. Further, the data dependencies of discrete parts of the application may overlap, such that they disagree about the allowable staleness of data.