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