From 8c877cc9c04400e54d394867dfa4a19effd9d192 Mon Sep 17 00:00:00 2001 From: unicodeveloper Date: Fri, 28 Sep 2018 14:59:08 +0100 Subject: [PATCH] Add content --- docs/source/tutorial/schema.md | 120 ++++++++++++++++++++++++++++++++- package-lock.json | 3 + 2 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 package-lock.json diff --git a/docs/source/tutorial/schema.md b/docs/source/tutorial/schema.md index b2cc537..e96aa33 100644 --- a/docs/source/tutorial/schema.md +++ b/docs/source/tutorial/schema.md @@ -5,6 +5,122 @@ description: Start here for the Apollo fullstack tutorial

Set up Apollo Server

-

Write your graph's schema

+Apollo Server is a GraphQL Server implementation that provides all the features you need to take your GraphQL API from prototype to production. -

Run your server

\ No newline at end of file +We need to install two packages when setting up Apollo Server: + +```bash +npm install apollo-server graphql --save +``` + +* [apollo-server](https://npm.im/apollo-server): This is the Apollo Server library. +* [graphql](https://npm.im/graphql): This package is the JavaScript reference implementation for GraphQL. It's needed for Apollo Server to function as intended. + +Apollo Server has various variants to accomodate easy integration with existing applications. Some of them are `apollo-server-express`, `apollo-server-hapi`, `apollo-server-koa`, etc. + +```bash +npm install apollo-server-express graphql --save +``` + +To quickly set up a GraphQL server using Apollo Server, a schema type definition and corresponding resolver is needed. The schema type definition represents your GraphQL schema, while the resolver is a function that implements the schema. + +Check out a simple Apollo Server example below: + +```js +const { ApolloServer, gql } = require('apollo-server'); + +const typeDefs = gql` + type Query { + name: String + } +`; + +// Resolvers define the technique for fetching the types in the schema. +const resolvers = { + Query: { + name: () => 'graphql', + }, +}; + +// In the most basic sense, the ApolloServer can be started +// by passing type definitions (typeDefs) and the resolvers +// responsible for fetching the data for those types. +const server = new ApolloServer({ + typeDefs, + resolvers, +}); +``` + +In the code above, we imported the `ApolloServer` class and `gql` tag from the `apollo-server` package.. They serve the following purpose: + +* **ApolloServer**: The `ApolloServer` class instantiates and starts a new GraphQL server. +* **gql**: The `gql` tag is a JavaScript template literal tag that enables syntax highlighting for our schema. + +

Write your graph's schema

+ +Every GraphQL server runs a schema at its core. A schema defines types and their relationships. The specifications of the types of queries that can be run against a GraphQL server are defined in a schema. Let's design the schema for our app. + +GraphQL schemas are at their best when they are designed around the needs of client applications. In fact, this is called **Schema First Development**, an approach for building applications with GraphQL that involves the frontend and backend teams agreeing on a schema first, which serves as a contract between the UI and the backend before any API development commences. + +In our app, we need to provide the following features: + +* Fetch all upcoming rocket launches. +* Fetch a specific launch. +* Fetch upcoming trips. +* Users should be able to login to be authorized to book and cancel launch trips. +* Users should be able to book launch trips. +* Users should be able to cancel launch trips. + +These features influenced the derived types for our Schema as shown below: + +_src/schema.js_ + +```js +const { gql } = require('apollo-server'); + +const typeDefs = gql` + type Query { + launches(pageSize: Int, cursor: String): [Launch]! + launch(id: ID!): Launch + user(id: ID!): User + } + + type Mutation { + bookTrips(userId: ID!, tripId: [ID!]): Boolean! + cancelTrip(userId: ID!, tripId: ID!): Boolean! + login(email: String): String + } + + type Launch { + id: ID! + cursor: String + year: String! + date: String! + mission: Mission! + rocket: Rocket! + launchSuccess: Boolean + } + + type Rocket { + id: ID! + name: String! + type: String! + } + + type User { + id: ID! + email: String! + avatar: String + trips: [Launch] + } + + type Mission { + name: String! + missionPatch: String + } +`; + +module.exports = typeDefs; +``` + +

Run your server

diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..48e341a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +}