⚠️
This is the documentation for the old GraphQL Yoga version 4. We recommend upgrading to the latest GraphQL Yoga version 5.

Migrate to GraphQL Yoga v5

Migration from Yoga V3

Install the new NPM package

npm i graphql-yoga

Drop unused graphiql options defaultVariableEditorOpen and headerEditorEnabled

These two graphiql options were not used and are now removed completely.

import { createYoga } from 'graphql-yoga'
import { schema } from './schema'
 
const yoga = createYoga({
  schema,
  graphiql: {
-    defaultVariableEditorOpen: false,
-    headerEditorEnabled: false
  }
})

Subscriptions use GraphQL over SSE “distinct connections mode”

Yoga previously used a custom, and simple, subscriptions transport over SSE. Now it implements the GraphQL over SSE “distinct connections mode” instead.

Nothing has changed on the server; but, on the client-side, we recommend you use graphql-sse. The recipes section will help you get going with any client out there!

Subscriptions only use SSE (text/event-stream) as transport method

Previously Yoga supported multipart/mixed just like text/event-stream. However, this was not a standard and it was not supported by any client. So, we decided to drop it and only support text/event-stream as the transport method.

Parse and validation cache are now under a single option parserAndValidationCache

Previously Yoga used two separate envelop plugins for parsing and caching. Now, it leverages a custom built plugin focused on Yoga. It therefore yields better performance, feels more native and of course reduces bundle size.

import {
  DocumentNode,
-  GraphQLError,
+  validate,
} from 'graphql'
import { createYoga } from 'graphql-yoga'
import { schema } from './my-schema'
import {
  documentCacheStore,
  errorCacheStore,
  validationCacheStore,
} from './my-cache'
 
interface CacheStore<T> {
  get(key: string): T | undefined
  set(key: string, value: T): void
}
 
const yoga = createYoga({
  schema,
- parserCache: {
+ parserAndValidationCache: {
    documentCache: documentCacheStore as CacheStore<DocumentNode>,
    errorCache: errorCacheStore as CacheStore<Error>,
+   validationCache: validationCacheStore as CacheStore<typeof validate>,
  },
- validationCache: validationCacheStore as CacheStore<readonly GraphQLError[]>
})