我正在使用 React/Relay/GraphQL 重建一个小型内部 Web 应用程序以熟悉此堆栈。基本上,它监控“活动”视频列表的分析。唯一的变化是用新列表替换活动视频 ID 列表。问题是在替换了 ID 之后,Relay 继续传递旧的 ID 列表而不是新的。
我一直无法弄清楚如何操作传递给commitMutation()
'supdater
和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!
}