How to invalidate Relay's cache after mutation

Question

I'm rebuilding a small, internal web app with React/Relay/GraphQL to get familiar with this stack. Basically, it monitors analytics of a list of "active" videos. The only mutation is to replace the list of active video IDs with a new list. The problem is that after replacing the IDs, Relay continues to deliver the old list of IDs instead of the new.

I haven't been able to figure out how to manipulate the store that's passed to commitMutation()'s updater and optimisticUpdater callbacks. I just need to either clear out the stored list of active videos so it knows to call a fresh one or have it re-run the graphql query to refresh the cache.

Specifically, I need to clear the results from this query:

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

The mutation (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 }

And the schema:

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

You're going to want to use The Relay "Environment".

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

Question: Why isn't there a command Relay.reset() which simply wipes EVERYTHING from the app?

Answer: Because it's much cleaner to just instantiate a new Relay.Environment() instead of trying to make sure you've cleaned everything on the global singleton Relay.Store.

EDIT: In response to your comment;

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.

Refetching & Cache Eviction Control 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.