Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

peerhenry
peerhenry

Posted on • Edited on

     

Putting GraphQL Playground in front of AppSync

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
rebelok profile image
Andrew Vdovichenko
  • Work
    Chief Software Architect
  • Joined

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?

CollapseExpand
 
peerhenry profile image
peerhenry
  • Joined

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.

CollapseExpand
 
rebelok profile image
Andrew Vdovichenko
  • Work
    Chief Software Architect
  • Joined

I didn't add any code except the code from the article ^_^

Thread Thread
 
peerhenry profile image
peerhenry
  • Joined

Hmm, I could not reproduce the issue. Can you tell me what node version you are using and what are the dependencies listed in package.json?

Thread Thread
 
rebelok profile image
Andrew Vdovichenko
  • Work
    Chief Software Architect
  • Joined

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

Thread Thread
 
peerhenry profile image
peerhenry
  • Joined
• Edited on• Edited

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.

CollapseExpand
 
loganpowell profile image
Logan Powell
  • Joined

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!

CollapseExpand
 
peerhenry profile image
peerhenry
  • Joined

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.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp