/graphqlpoc

graphql poc using Apollo and Express

Primary LanguageJavaScriptMIT LicenseMIT

The following repo is a proof of concept built to explore in depth GraphQL. It's built on top of hapi.js and Apollo.

POC Concept

Create an set of api's which manage a conference website. This means modeling the relationship of a series of events, their speakers and the speakers sessions.

This was selected due to the many to many relationship of the schema.

  • Events have 1-M Speakers and Sessions.
  • Speakers have 1-M Sessions
  • Sessions have 1-M Speakers
  • A Speaker can be in multiple Events
  • A Session can be in multiple Events

Areas Explored:

  • Deprecating fields
  • Composing Types
  • Composing Queries and Mutations
  • Schema Generation
  • Queries, Mutations, Built In Directives, Field Resolvers
  • Context

Functional Areas Yet To Explore

  • Authentication and Authorization
  • Schema Stitching
  • Data loaders
  • Filtering,Paging
  • Custom Logging in the pipeline
  • TypeScript Conversion
  • Extended Validation, think an email address

Github Tags

There are multiple versions of this POC at different states of development.

  • ApolloSample was the source base using the Apollo framework to generate the schema.
  • graphQLTypes leverage the GraphQL framework to build and compose the schema.

Setup and Running

Packages Used

  • webserver: hapi
  • graphql core: graphql
  • graphql implementation: apollo
  • logging: winston
  • data layer: mongoose / mongodb
  • lowdash: used to merge schemas, mutations and such at runtime.

Demo Execution

  1. npm install
  2. .env file will need the proper connection string for a database.
  3. npm start this runs nodemon ./index

Browsing

Interesting Queries

Basic Query

  query {
    sessions {
      id
      title
      description
    }
  }

Nested Query

  query {
    sessions {
      title
      description
      speakers {
        firstName
        lastName
      }
    }
  }

Query two types "separately":

  query {
    events {
      name
      year
    }
    sessions {
      title
      id
    }
  }

Interesting Mutations

Create a new Speaker passing in arguments

mutation ($newSpeaker: SpeakerInputType!) {
  createSpeaker(newSpeaker: $newSpeaker)
}

Passing arguments via custom input types

{
	"newSpeaker": {
    "firstName": "jimmy",
    "lastName": "johns",
    "email": "eatjjs@aol.com"
  }
}

Directives

There are two built in directives @skip and @include

query ($skipMe: Boolean!) {
  sessions {
    title @skip (if: $skipMe)
  }
}

Where $skipMe is defined in the passed in arguments

{
  "skipMe": true
}

Helpful Resources:

Learn

Samples

Good Blog Posts

Framework Areas

Core Concepts

Directives

Tools

Community Efforts

Apollo

Mobile