React Apollo Server
Tags: react, apollo
Published: 2021-02-12 13:44:00

...Continuation

The previous [post](https://dev.to/jwp/react-graphql-starter-162i) was an introduction to GraphQL, the JSON based query language.

This post shows how easy it is to create a GraphQL database using  [Apollo Server](https://www.apollographql.com/docs/apollo-server/). All of the code came from the link above but contains comments to help you out.

Create a new folder named apollo-server-project. Next issue these commands from Terminal in VSC.

```
npm i apollo-server
npm i graphql
```
Open the pacakge.json file and you should see these two new entries:

```
  "dependencies": {
    "apollo-server": "^2.20.0",
    "graphql": "^15.5.0"
  }
```
The package.json file get's a new entry on each new install.

- Create a new file named index.js

Add this code.
```
const { ApolloServer, gql } = require('apollo-server');
```
This code says I want to use the ApollServer and gql functions from the file 'apollo-server' found in my node_modules folder. 

**Define the "Schema"**

```
// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
const typeDefs = gql`
  # Comments in GraphQL strings (such as this one) start with the hash (#) symbol.

  # This "Book" type defines the queryable fields for every book in our data source.
  type Book {
    title: String
    author: String
  }

  # The "Query" type is special: it lists all of the available queries that
  # clients can execute, along with the return type for each. In this
  # case, the "books" query returns an array of zero or more Books (defined above).
  type Query {
    books: [Book]
  }
`;

  
```
A "Schema" is a way to describe the shape of data. The code above uses a constant named 'typeDefs' which will be passed in to the ApolloServer instance when we start it.

'typeDefs' calls a function named 'qql' and passes in a string of comments and types. Here we define the makeup of a book, and what the reserved name of 'type Query' will return; structurally from a query. In this case a Query will return an array of the 'Book' type.

**Enter the data**

This code defines the data of our query for 'books'

```
const books = [
  {
    title: 'The Bible',
    author: 'God',
  },
  {
    title: 'Romans',
    author: 'Paul',
  },
];

```

**Define the [Resolver](https://www.thebeatles.com/album/revolver)** 

```
// Resolvers define the technique for fetching the types defined in the
// schema. This resolver retrieves books from the "books" array above.
const resolvers = {
  Query: {
    books: () => books,
  },
};

```
This function says, 'when a query comes in, find an entry for 'books' and return the 'books' data.

**Starting the Server**
```
// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({ typeDefs, resolvers });

// The `listen` method launches a web server.
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

```
The comments say it all. When the server starts the console will tell us the URL.

- Start the server
```
node index.js
```

You should see this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9dbwdbb4ted0zlzbap83.png)

This is called the GraphQL Playground. It lets you experiment with queries to your database, which will later be used in your React code. 

**An Example Query**
```json
{
  books {
    title
    author
  }
}

```
This query says, from my connection to the database (in this case port:3000), call the 'resolver' to find a query entry named "books", return the properties "title" and "author" for all entries. 

The response should look like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/it1773h8wj1v2dmpz6y3.png)


Summary:
- graphQL is at least 10 times easier to implement than an equivalent SQL server.
  - The queries are simple.
  - Server set up is easy
  - Data entry is just JSON
  - No foreign key set up
  - No Joins
  - Ultra fast

Nobody's saying it, but we should be asking "Has SQL met it's match by a better web based technology?"

My thoughts are Yes.

JWP2021 React Apollo Server