Custom fragment matcher and schema fetching script for `apollo-cache-inmemory`.

.env

GRAPHQL_URI=http://localhost:3001/graphql

.graphqlconfig

{
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "development": "${env:GRAPHQL_URI}"
    }
  }
}

client.js

import InMemoryCache from 'apollo-cache-inmemory'
import createFragmentMatcher from './fragment-matcher'
import implementations from './schema-implementations.json'

const cache = new InMemoryCache({
  fragmentMatcher: createFragmentMatcher(implementations)
})

fragment-matcher.js

export default implementations => ({
  match: ({ id }, typename, { store }) => {
    const cached = store[id]

    if (!cached) return false

    if (!cached.__typename)
      throw new Error(
        `Missing __typename to match fragment: ${JSON.stringify(cached)}`
      )

    return (
      typename === cached.__typename ||
      (implementations[typename] &&
        implementations[typename].includes(cached.__typename))
    )
  }
})

package.json

{
  "dependencies": {
    "apollo-cache-inmemory": "^0.2.0-beta.5",
    "dotenv-cli": "^1.4.0"
  },
  "devDependencies": {
    "graphql-config": "^1.0.7"
  },
  "scripts": {
    "update-schema": "dotenv node update-schema"
  }
}

schema-implementations.json

{
  "Person": [
    "Student",
    "Teacher"
  ]
}

schema.graphql

interface Person {
  id: ID!
  name: String!
}

type Student implements Person {
  id: ID!
  name: String!
}

type Teacher implements Person {
  id: ID!
  name: String!
}

update-schema.js

const { getGraphQLProjectConfig, writeSchema } = require('graphql-config')
const { writeFile } = require('fs')
const { promisify } = require('util')

const writeFileAsync = promisify(writeFile)
const projectConfig = getGraphQLProjectConfig()
const endpoint = projectConfig.endpointsExtension.getEndpoint('development')

endpoint
  .resolveSchema()
  .then(schema => {
    const updateSchema = writeSchema(projectConfig.schemaPath, schema)
    const updateImplementations = writeFileAsync(
      'schema-implementations.json',
      `${JSON.stringify(schema._implementations, null, 2)}\n`
    )

    Promise.all([updateSchema, updateImplementations])
      .then(() => console.log('Updated schema.'))
      .catch(console.error)
  })
  .catch(console.error)

Following on from this discussion.

The update-schema script simultaneously generates schema-implementations.json for the custom fragment matcher, as well as schema.graphql for eslint-plugin-graphql and other tools that refer to .graphqlconfig from a remote GraphQL API.

.graphqlconfig can be configured for a .graphql or .json schema; I choose to use .graphql because it is about 7 thousand lines smaller for versioning and easier to read.

To my knowledge, schema._implementations works for both unions and interfaces but I could be wrong, since we don't use unions and I havn't tested it.