Prerequisite knowledge: Node, NPM and AWS AppSync
AWS AppSync is a service for hosting aGraphQL API with cool features like being able to generate backend resources based on a schema. We can inspect and debug that API from the queries tab in the AppSync console. But there's another tool calledGraphQL Playground that has a lot more features like tabs, history, prettification, complete schema inspection and custom settings. It's also nice not having to login to AWS in order to debug or play around with our GraphQL API. So let's take a look at how we can hook up GraphQL Playground to AppSync.
Step 1: Install the necessary packages
After setting up your project with npm, we are going to install the following dependencies:
npm i -S express @workpop/graphql-proxy graphql-playground-middleware-express babel-runtime
We are going to run a node server usingexpress. Then we need a way to proxy our GraphQL API so that our queries and mutations get forwarded to AppSync. That's where@workpop/graphql-proxy comes in. This package is built for schema stitching, which is useful if you need to combine multiple GraphQL endpoints (you can read more about that inthis blogpost). But for our purpose we are happy with just the proxying. Finally,graphql-playground-middleware-express will give us an endpoint for the GraphQL Playground IDE.
Step 2: Get your API details
Within the Appsync console, navigate to theSchema tab, clickExport schema and chooseschema.graphql
. Save it to your project directory, rename the file toschema.js
. Surround schema with backticks and export the string, so it will look like this:
// schema.jsmodule.exports=` <YOUR SCHEMA HERE>`;
Now we just need the URL and Api key. Back in the Appsync console, navigate to theSettings tab and copy yourAPI URL and a validAPI key. Alternatively, if you've usedAmplify to setup your API you can also get theses details by runningamplify status
from your terminal. You can put these values in a.env
file which you can read withdotenv, but for this example we'll just put them in a javascript file:
// settings.jsmodule.exports={API_KEY:"<your api key here>",API_URL:"<your endpoint here>"};
Don't forget to add this file to your.gitignore
if you're using git!
Step 3: The code
Now all that's left to do is write a little express server:
// server.jsconstexpress=require("express");constregisterServices=require("@workpop/graphql-proxy").default;constexpressPlayground=require("graphql-playground-middleware-express").default;consttypes=require("./schema.js");const{API_KEY,API_URL}=require("./settings.js");constSERVICE_CONFIG={APPSYNC:{address:API_URL,typeDefs:types}};constPORT=4000;constapp=express();app.get("/playground",expressPlayground({endpoint:"/graphql"}));registerServices({SERVICE_CONFIG,server:app,masterTypeDefs:types,customHeaders:{"x-api-key":API_KEY},enableGrqphiQL:true}).then(()=>{app.listen(PORT,()=>console.log(`Running playground proxy on http://localhost:${PORT}/playground`));});
Now start your server withnode server.js
et voila. Happy querying!
Edit:
Note that AppSync might have some AWS directives in your exported schema which graphql-proxy cannot recognize, so you will have to remove those manually.
Top comments(8)

Hi@peerhenry!
I've tried to follow your article to setup playground, but when I run it I get this error, when @workpop/graphql-proxy is required:
internal/modules/cjs/loader.js:1033
throw err;
^
Error: Cannot find module 'babel-runtime/regenerator'
So I wonder: do I miss a step/dependency/version to have it working?

Hi@rebelok,
It looks like your using Babel to transpile your javascript, which means you need to do a little extra configuration in order to get it to work with Promises.
Check you babel version, if <7.4.0 you will need:npm install --save @babel/polyfill
and in as early as possible in your code:require("@babel/polyfill");
.
For later versions you can useimport "core-js/stable";
andimport "regenerator-runtime/runtime";
Seethis page at babeljs.io for more information.

Here is the repository:github.com/rebelok/graphql-playground
I've tried on nodes 8, 10, 12 and 14 - the result is the same ^_^

I was able to fix the issue by installingnpm i -S babel-runtime
. Apparently it's a peer dependency of@workpop/graphql-proxy
, meaning it doesn't get installed alongside of it. (The only reason I didn't run into this earlier is because node was able to resolve it from an underlying folder on my end.) I will update the article, thanks for bringing it to my attention. Let me know if this fixes the issue for you as well.

Hi@peerhenry! Thank you for the concise and perfectly timed post! I hit a snag and was wondering if you ran into a similar issue:
github.com/aws-amplify/amplify-js/...
Any follow up would be so very much appreciated!

Hi@loganpowell. It seems that bundling graphql with a tool like parcel or webpack can cause this issue. Perhaps you can find a solution by tweaking your minification and/or mangling settings.
For further actions, you may consider blocking this person and/orreporting abuse