Apollo GraphQL

⏱ This tutorial takes less than 10 minutes.

Hello there, Beginner!

This tutorial walks you through getting started with Begin's Apollo example app which implements a minimal Apollo based GraphQL API.

✋🏽 You will need git, node.js and a GitHub account to follow along.

---

Create your Apollo app

First click the Deploy to Begin button below

Next name your app and click the "Create..." button to have Begin create a new app and GitHub repo for it.

Check out your apps' activity feed!

Now click the Staging link in the upper left corner to see your app running in your staging environment.

You should see something like the image below:

Way to go!

Now go back to Begin and follow the prompts on the intro cards to see the system in action.

💡 Learn more about CI/CD environments

---

Project structure

If you followed the intro cards in the activity view you are ready to review your project's structure on your local machine.

.
├── graphql/
│   └── index.js/
├── public/
│   ├── 404.html
│   └── index.html
└── package.json

graphql/

This directory contains a handler function for the GraphQL API.

Take a peek at /graphql/index.js.

// /graphql/index.js

let arc = require('@architect/functions')
let {ApolloServer, gql} = require('apollo-server-lambda')

// Construct a schema, using GraphQL schema language
let typeDefs = gql`
  type Query {
    hello: String
  }
`
// Provide resolver functions for your schema fields
let resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
}

let server = new ApolloServer({typeDefs, resolvers})
let handler = server.createHandler()

exports.handler = function(event, context, callback) {
  let body = arc.http.helpers.bodyParser(event)
  // Body is now parsed, re-encode to JSON for Apollo
  event.body = JSON.stringify(body)
  handler(event, context, callback)
}

The handler code above shows how to define type definitions and query resolvers for a GraphQL API. For more information check out: How to build a schema with Apollo

public/

The public directory is for static assets.

Give public/index.html a gander

// public/index.html

 <!-- Example GraphQL query -->
 // Fetch data graph layer
  <script type=module>
    (async function() {
      let query = `{hello}`
      let result = await fetch('/graphql', {
        method: 'post',
        body: JSON.stringify({query}),
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/json',
        }
      })
      let json = await result.json()
      console.log(json)

      // Append results to div element
      let code = document.getElementById('code')
      code.innerHTML = JSON.stringify(json, null, 2)
    })()
  </script>

When the page loads, the code above uses fetch to post to the GraphQL API then display the results.

💡 Learn more! about HTTP functions in Begin apps.

Congratulations!

You've now got a shiny new Apollo GraphQL app hosted on Begin – nice work.

---

Additional resources

• Expand the capabilities of your app:

  • Creating new routes
  • Add Begin Data

• Begin reference docs

• Get help:

  • Begin community
  • Issue tracker

• More about Apollo

  • Apollo home
  • Apollo docs
  • LevelUpTuts - What Is Apollo?

• More about GraphQL

  • GraphQL: The Documentary
  • GraphQL home
  • GraphQL docs
  • GraphQL Playground