DEV Community

Jan Dvorak
Jan Dvorak

Posted on

Upgrading to Apollo 3 in Meteor in 3 steps

#meteor #javascript

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 ❤️.

Oldest comments (5)

Collapse
 
freeseamew profile image
freeseamew •

As far as I know, file upload has also changed in apollo server 3. Can I know how to upload the file of meteor with appollo server 3?

Collapse
 
freeseamew profile image
freeseamew • • Edited

I have set the graphql-upload in meteor+apollo based on the apollo document as follows.
However, the file is not being uploaded.
Can I know what the problem is?

...

(async function(){

...

  const server = new ApolloServer({
    playground: true,
    schema,
    plugins: [
      ...
    ],
    context: async({req}) => ({
      user: await getUser(req.headers.authorization) ;
    }),
  });  

  await server.start();

  const app = WebApp.connectHandlers;

  WebApp.connectHandlers.use("/graphql", (req, res, next) => {
    graphqlUploadExpress();
    next();
  });

  server.applyMiddleware({
    app,
    cors: true,
    path: '/graphql',
  });

})();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
freeseamew profile image
freeseamew •

The conclusion was solved by loading express as follows.

I hope it will help someone.

...

(async function(){

...

  const server = new ApolloServer({
    playground: true,
    schema,
    plugins: [
      ...
    ],
    context: async({req}) => ({
      user: await getUser(req.headers.authorization) ;
    }),
  });  

  await server.start();

  const app = express(); // This is important!
  app.use(graphqlUploadExpress()); // This is important!
  WebApp.connectHandlers.use('/graphql', app); // This is important!

  WebApp.connectHandlers.use("/graphql", (req, res, next) => {

    if (req.method === "GET") {
      console.log('Test!!!!!!');
      res.end()
    }    
    if(req.method ==="POST") {
      console.log('@@@@')
      console.log(`req: ${JSON.stringify(req.body) }`);
    }
    next();

  });
  server.applyMiddleware({
    app,
    cors: true,
    path: '/graphql',
  });

})();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
imhazige profile image
imhazige •

I can not make the subscription work, could you provide the example.

Refer to this ticket.
github.com/meteor/meteor/issues/11926

Collapse
 
storytellercz profile image
Jan Dvorak •

GraphQL subscriptions are entirely different issue and indeed are not supported out of the box in Meteor. In Meteor though you can just use the native pub/sub implementation to get better results.
I would recommend this forum discussion on the topic of GraphQL subscriptions: forums.meteor.com/t/meteor-collect...

Read next

sh20raj profile image

AudiPlay : Custom HTML5 Audio Player

Sh Raj -

ruben_alapont profile image

Streamlining Your Code: Best Practices for Node.js Streams

Rubén Alapont -

peboy profile image

Creating an animated loading spinner with pure CSS

Adeyele Paul -

rajeshroyal profile image

Introducing Catepedia: A Nuxt 3 Cat Breed Search App

Rajesh Royal -