{"id":23082,"date":"2018-10-29T11:33:36","date_gmt":"2018-10-29T09:33:36","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=23082"},"modified":"2018-11-05T09:03:46","modified_gmt":"2018-11-05T07:03:46","slug":"build-simple-graphql-api-service-express","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/build-simple-graphql-api-service-express\/","title":{"rendered":"Build a Simple GraphQL API Service with Express"},"content":{"rendered":"

\u201cI love writing authentication and authorization code.\u201d ~ No Web Developer Ever.<\/b> Tired of building the same login screens over and over? Try the Okta API for hosted authentication, authorization, and multi-factor auth.<\/a> <\/span><\/p>\n

GraphQL has become an immensely popular alternative to REST APIs. The flexibility you get from using GraphQL makes it easier for developers to get any information they need for an app, and\u00a0just<\/em>\u00a0the information they need for that portion of the app. That gives you the feel of a very customized API and can help cut down on bandwidth.<\/p>\n

In this tutorial, I\u2019ll show you how to write a custom GraphQL API using Node and Express. I\u2019ll also show you how to secure parts of the API while making other parts open to the public.<\/p>\n

Create the GraphQL API with Express<\/h2>\n

If you\u2019re in a hurry and would rather cut to the chase, you can find the final sample code\u00a0on GitHub<\/a>. However, if you want to follow along to get more detail and see how the code was put together, keep reading.<\/p>\n

To create the API, start by creating a new folder and creating a\u00a0package.json<\/code>\u00a0file to manage your dependencies. You\u2019ll also need to install a few dependencies to get GraphQL with Express up and running:<\/p>\n

mkdir graphql-express\r\ncd graphql-express\r\nnpm init -y\r\nnpm install express@2.8.4 express-graphql@0.6.12 graphql@14.0.2 graphql-tag@2.9.2 cors@2.8.4<\/pre>\n
Now create a file named\u00a0index.js<\/code>. This will be your main entry point:<\/p>\n
const express = require('express')\r\nconst cors = require('cors')\r\nconst graphqlHTTP = require('express-graphql')\r\nconst gql = require('graphql-tag')\r\nconst { buildASTSchema } = require('graphql')\r\n\r\nconst app = express()\r\napp.use(cors())\r\n\r\nconst schema = buildASTSchema(gql`\r\n  type Query {\r\n    hello: String\r\n  }\r\n`)\r\n\r\nconst rootValue = {\r\n  hello: () => 'Hello, world'\r\n}\r\n\r\napp.use('\/graphql', graphqlHTTP({ schema, rootValue }))\r\n\r\nconst port = process.env.PORT || 4000\r\napp.listen(port)\r\nconsole.log(`Running a GraphQL API server at localhost:${port}\/graphql`)<\/pre>\n
This is about as simple as a GraphQL server gets. All this does is return \u201cHello, world\u201d when you query \u201chello\u201d, but it\u2019s a start. To take it for a test spin, run\u00a0node .<\/code>, then in another tab open your browser to the\u00a0GraphQL Playground<\/a>. Once there, enter\u00a0http:\/\/localhost:4000\/graphql<\/code>\u00a0to access your GraphQL server.<\/p>\n
\"GraphQL<\/a><\/p>\n
The GraphQL Playground will help explore your schema and test out queries. It even automatically creates some documentation for you.<\/p>\n
\"GraphQL<\/a><\/p>\n
Try querying for\u00a0hello<\/code>\u00a0using the following query:<\/p>\n
query {\r\n  hello\r\n}<\/pre>\n
\"GraphQL<\/a><\/p>\n
Improve Your GraphQL Developer Experience<\/h2>\n
Here are a couple quick tips to help make your development experience a little better:<\/p>\n
    \n
  1. Install a linter to help catch bugs in your editor. This will help keep your styling consistent and catch any easily-avoidable bugs.\n