Upgrading to Apollo 3 in Meteor in 3 steps

Jan Dvorak - Aug 2 '21 - - Dev Community

Apollo server 3 is out and in Meteor 2.4 the Apollo skeleton is going to be updated to it. But if you have an existing project with Apollo 2 in your Meteor app, you will have to spend a little bit of a time to get to the newest version.

Here I will cover the basic 3 steps to upgrade to Apollo 3 in your Meteor app. Do note that you will probably do a little bit more for your particular app as there are many changes. Don't forget to study the Apollo migration guide.

1. Add Express to your dependencies

Express has become peer dependency for Apollo and Connect which comes bundled with Meteor is no longer enough, so you will need to add it for Apollo to run:

meteor npm i --save express
Enter fullscreen mode Exit fullscreen mode

2. Update your Apollo starting script

You will have to re-visit your starting script as Apollo now requires to explicitly call the start function. This will mean that you will have to re-structure a bit how to start the server with Apollo:

// apollo.js
import { ApolloServer } from 'apollo-server-express';
import { WebApp } from 'meteor/webapp';
import { getUser } from 'meteor/apollo';
import { makeExecutableSchema } from '@graphql-tools/schema';

const server = new ApolloServer({
  schema: makeExecutableSchema({
    typeDefs,
    resolvers,
  }),
  context: async ({ req }) => ({
    user: await getUser(req.headers.authorization)
  })
})

export async function startApolloServer() {
  await server.start();
  const app = WebApp.connectHandlers;

  server.applyMiddleware({
    app,
    cors: true
  });
}

// main.js
import { startApolloServer } from './apollo';

function insertLink({ title, url }) {
  LinksCollection.insert({title, url, createdAt: new Date()});
}

try {
  startApolloServer().then();
} catch (e) {
  console.error(e.reason);
}
Enter fullscreen mode Exit fullscreen mode

3. Update your resolvers and queries

Almost everything now is async in Apollo, so you will need to update your resolvers and queries with async keyword before them like this:

const resolvers = {
  Query: {
    getLink: async (obj, { id }) => LinksCollection.findOne(id),
    getLinks: async () => LinksCollection.find().fetch()
  }
};
Enter fullscreen mode Exit fullscreen mode

And that should be it! That is if you have a very simple setup. Changes are that you will need to dive in, especially in updating your options for Apollo, so don't forget to check with the Apollo Server changelog for all the details.


If you like my work, please support me on GitHub Sponsors ❤️.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player