React Apollo Server

...Continuation

The previous post 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. 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

// 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:

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

{
  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:

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