GraphQL Yoga Server with Defer and Stream

GraphQL Yoga from The Guild is a batteries-included cross-platform GraphQL over HTTP spec-compliant GraphQL server powered by Envelop and GraphQL Tools focused on easy setup, performance and great developer experience.

This is an example of a GraphQL Yoga val with defer and stream features.

Defer and stream are directives that allow you to improve latency for clients by sending the most important data as soon as it’s ready.

To access GraphiQL - the GraphQL Playground - visit the / route. That's what you see in the preview pane below.

The @defer directive allows you to post-pone the delivery of one or more (slow) fields grouped in an inlined or spread fragment. Visit / and paste the following operation into the left panel.

query SlowAndFastFieldWithDefer {
  ... on Query @defer {
    slowField
  }
  fastField
}

The @stream directive allows you to stream the individual items of a field of the list type as the items are available. Visit / and paste the following operation into the left panel.

query MyStream {
  alphabet @stream
}

See the GraphQL Yoga documentation for configuration and all the bells and whistles.

For this example, we'll set to / to make it easier to demo.

However, by default, the GraphQL route is configured to be on /graphql which is more common.

Create val
const yoga = createYoga({
  schema,
})

You can set a custom endpoint:

Create val
const yoga = createYoga({
  schema,
  graphqlEndpoint: "/my-gql",
})

A landing page is shown be default whenever a 404 is hit.

You can disable it via the landingPage option.

Create val
const yoga = createYoga({
  schema,
  landingPage: false
})

Migrated from folder: GraphQL/graphQLYogaDeferAndStream