Migration from Apollo Server

Installation

You can start with installing graphql-yoga package.

npm i graphql-yoga

pnpm add graphql-yoga

yarn add graphql-yoga

bun add graphql-yoga

Install equivalent Envelop plugins of the Apollo Server

Some features that are included within apollo-server by default must be installed as envelop plugins (Learn more about envelop plugins here).

• Apollo Federation
  • If you are using Apollo Federation, install @envelop/use-apollo-federation
• Apollo Server Errors
  • If you are using Apollo Server errors, install @envelop/use-apollo-server-errors
• Apollo Tracing
  • If you are using Apollo Tracing, install @envelop/use-apollo-tracing
• Response Cache
  • If you are using Response Cache, you should set up @graphql-yoga/plugin-response-cache for the same functionality

Check out more plugins on Envelop Plugin Hub

Example initial usage of GraphQL Yoga

For example if you are using Apollo Server Errors;

apollo-server-errors-example.ts

import { schema } from './schema'
- import { ApolloServer } from 'apollo-server'
+ import { createYoga } from 'graphql-yoga'
+ import { useApolloServerErrors } from '@envelop/apollo-server-errors'
 
- const server = new ApolloServer({
+ const yoga = createYoga({
  // You can also pass `typeDefs` and `resolvers` here directly if you previously use `ApolloServer` constructor to build your `GraphQLSchema`
  // schema: createSchema({ typeDefs, resolvers }),
  schema,
+  plugins: [useApolloServerErrors()],
})
 
+ const server = createServer(yoga)
 
server.listen(4000)

Migration from standalone apollo-server

You don’t need anything special. You can just use GraphQL Yoga as in the example above.

Migration from apollo-server-*

Check the integration section to choose the server framework you are using with Apollo Server.

For example, if you are using Express, you should remove the standalone HTTP server part(createServer(yoga) & server.listen(4000)) from the code above and replace server.applyMiddleware({ app }) with the route as in Express Integration section

- server.applyMiddleware({ app })
+ app.use('/graphql', yoga)

Batched Queries/Requests

Batched queries is a practice first supported and made popular by the Apollo ecosystem. The idea of batched query operations is to reduce the number of network requests by grouping them together. This is achieved by slightly delaying the HTTP request in order to gather all the query operations that are executed shortly after each other.

GraphQL Yoga does not support batched queries for the following reasons:

All batched queries are as slow as the longest running individual query.

Because the GraphQL server does not start sending a response to the client until all the queries are completed, a slow query will prevent a faster query result to be already processed/shown to the end user.

Batched queries can ba achieved by composing multiple GraphQL fragments/operation into a single one.

Instead of having two operations:

query A {
  viewer {
    id
    name
  }
}

query B($postId: ID!) {
  post(id: $postId) {
    id
    title
  }
}

These operations can be combined into a single operation:

query AB($postId: ID!) {
  viewer {
    id
    name
  }
  post(id: $postId) {
    id
    title
  }
}

Furthermore, if you want a partial of the GraphQL operation to arrive at the client as soon as possible, you can use the @defer directive.

query AB($postId: ID!) {
  ... on Query @defer(label: "A") {
    viewer {
      id
      name
    }
  }
  ... on Query @defer(label: "A") {
    post(id: $postId) {
      id
      title
    }
  }
}

You can learn more on how to get the best out of this in our “Unleash the power of Fragments with GraphQL Codegen” article.