/graphql-quickstart

GraphQL quickstart

Primary LanguageHTML

GraphQL Quickstart

Breakdown: History and about/why it matters General concepts Short Demo - how to get started Other tools of interest.

General Concepts we'll cover:

  • Schema
  • Subscription
  • Mutations
  • Queries

Demos

Backend

https://hasura.io/ Just to get us moving quickly. Sets up a GraphQL endpoint on a Postgres database.

We're going to use Heroku... Follow the instructions here (set up a Heroku account if you don't already have one): https://docs.hasura.io/1.0/graphql/manual/getting-started/heroku-simple.html

Post deployment: Example: https://gql-postgres.herokuapp.com/console

ExpressJS

Basics


var  express  =  require('express');
var  app  =  express();
//adding the apolloServer
const { ApolloServer, gql } =  require('apollo-server-express');

//schema
const  typeDefs  =  gql`
type Query {
books:[Book]
book: Book
}

type Book {
title: String!
author: String!
published: Int!
}
`;

// resolvers - this is the function that says how to get the data!
const  resolvers  = {
Query: {
books: () =>  books,
book: () => {
return {
title:  'A System Of Logic',
author:  'John Stewart Mill',
published:  1876
}
}
}
}
// this is the Apollo server - passing the typeDefs (i.e. Schema, and resolvers)
const  server  =  new  ApolloServer({
typeDefs,
resolvers
});

//use the middleware to attach
server.applyMiddleware( {app} );

General concepts

Schema

Types (scalar):

  • ID
  • Int
  • Float
  • String
  • Boolean

Types can also be Objects... (Examples):

  • People
  • Car
  • Book

These types can have modifiers:

Example:

  • String = nullable string

  • String! = non-nullable

  • [String] = List of nullables

  • [String]! = non-nullable list of nullable strings 😊

  • [String!]! = non-nullable list of non-nullable strings

Lets Build a Schema (typeDef in Apollo Server language):

This is a Query...

/* remember - resolvers are the functions to 
   tell you how to get your data
*/
const  resolvers  = {}
gql`
	Query: {
		books: () =>  books
	}
	This is the Type...

	Type User {
	Id: ID
	Name: String!
	Email: String!
	}
`

Short Demo - How to get started

Resources:

Repos And Such

Videos