GraphQL Intro 2

Why use GraphQL ?

Getting Started With GraphQL.js

Running an Express GraphQL Server

GraphQL – Schemas and Types

What is the difference between apollo server and express-graphql

Express-GraphQL is a piece of middleware, to quickly setup a GraphQL Server, either with Express, or any web-framework that supports middleware.

Apollo-server is a package that will sit on an existing node server and parse the GraphQL queries. (Very similar to express-graphql) You can use it with express, Koa etc.

My recommendation is use Graphql-yoga as it’s built with apollo-server and express-graphql. And it’s built and maintained by the Prisma Team

NPM Trends : apollo-server vs express-graphql vs graphql-yoga vs prisma vs apollo-server-express

1. graphql-yoga
2. apollo-server-express
3. apollo-server
4. express-graphql

Trend Chart

graphql-tools

dev.apollodata.com/tools/graphql-tools/generate-schema.html
graphql-tools.com
Git

GraphQL Tools is an npm package and an opinionated structure for how to build a GraphQL schema and resolvers in JavaScript.

Functions in the graphql-tools packages are not just useful for building servers. They can also be used in the browser, for example to mock a backend during development or testing.

Using GraphQL with HTTP

You can develop your JavaScript based GraphQL API with ‘graphql-tools'(to write the schema and resolver code) and ‘express-graphql'(to connect it to a web server) together

If you want to bind your JavaScript GraphQL schema to an HTTP server, you can use ‘express-graphql’.

Schema Generate

When using graphql-tools, you describe the schema as a GraphQL type language string

const typeDefs = `
  type Author {
    id: Int!
    firstName: String
    lastName: String
    """
    the list of Posts by this author
    """
    posts: [Post]
  }

  type Post {
    id: Int!
    title: String
    author: Author
    votes: Int
  }

  # the schema allows the following query:
  type Query {
    posts: [Post]
    author(id: Int!): Author
  }

  # this schema allows the following mutation:
  type Mutation {
    upvotePost (
      postId: Int!
    ): Post
  }
`;

Then you define resolvers as a nested object that maps type and field names to resolver functions:

import { find, filter } from 'lodash';

// example data
const authors = [
  { id: 1, firstName: 'Tom', lastName: 'Coleman' },
  { id: 2, firstName: 'Sashko', lastName: 'Stubailo' },
  { id: 3, firstName: 'Mikhail', lastName: 'Novikov' },
];

const posts = [
  { id: 1, authorId: 1, title: 'Introduction to GraphQL', votes: 2 },
  { id: 2, authorId: 2, title: 'Welcome to Meteor', votes: 3 },
  { id: 3, authorId: 2, title: 'Advanced GraphQL', votes: 1 },
  { id: 4, authorId: 3, title: 'Launchpad is Cool', votes: 7 },
];

const resolvers = {
  Query: {
    posts: () => posts,
    author: (_, { id }) => find(authors, { id }),
  },

  Mutation: {
    upvotePost: (_, { postId }) => {
      const post = find(posts, { id: postId });
      if (!post) {
        throw new Error(`Couldn't find post with id ${postId}`);
      }
      post.votes += 1;
      return post;
    },
  },

  Author: {
    posts: author => filter(posts, { authorId: author.id }),
  },

  Post: {
    author: post => find(authors, { id: post.authorId }),
  },
};

At the end, the schema and resolvers are combined using makeExecutableSchema:

import { makeExecutableSchema } from '@graphql-tools/schema';

export const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

Apollo Server Example

Start here to learn how to build full-stack apps with Apollo

SpaceX-API Example
fullstack-tutorial.git

Second half of the tutorial
GraphQL Crash Course – Pictures
Graphql – Intro