How to get the Newest Version of GraphQL Playground with ApolloServer — Edited

Hey everyone. Here at Novvum, we love apollo-server, and we love graphql-playground. We also love how they work so well together. Here is a quick tutorial on how to enjoy the newest features of Playground when working with ApolloServer.

For native desktop Playgrounds (yarn dev setup):

If you are a developer that prefers to run the native graphql-playground app, then you are lucky. All you need to do in order to grab the latest features is to head over to https://github.com/prisma/graphql-playground/releases and grab the latest version

Your package.json will likely look something like this:

"start": "dotenv -- nodemon -e ts,graphql -x ts-node src/index.ts",
"dev": "npm-run-all --parallel start playground",
“playground”: “graphql playground”

Once you run your dev environment, your native playground app will open and run with the latest downloaded release on your machine.

For those using the web-based Playgrounds (putting your endpoint right into your browser):

For devs that rely on the web-based playground, Apollo Server uses a default version of graphql-playground-react that does not include polling and schema viewer. Currently, the default is set at 1.7.10, while those features are available at 1.7.20. This newer version includes some great features like SDL viewer, schema polling and a bunch of improvements!

If you are the type a person who always wants the shiny new toys ⭐️ or are just a control freak 🎮 who wants power over which GraphQL Playground your server uses, check this out:

const server = new ApolloServer({
schema,
playground: { version: ‘1.7.20’ }
})

Just add a version option to the playground config within ApolloServer(), and you are good to go. Simple as that! 🙌🎊

Now you can dictate your GraphQL Playground version for your web playground and enjoy the simple things in life like shiny new features and control over minor details. For more docs on the other configuration options, check out Apollo’s docs here.

Please feel free to reach out to provide feedback or chat!

✉️ Email — trevor@novvum.io

＠ Twitter— @thetrevorHeath