Migration from Yoga V3

Install the new NPM package

npm i graphql-yoga

yarn add graphql-yoga

pnpm add graphql-yoga

bun add 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[]>
})