DEV Community

loading...
Cover image for React Apollo Server

React Apollo Server

jwp profile image John Peters ・3 min read

...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
Enter fullscreen mode Exit fullscreen mode

Open the pacakge.json file and you should see these two new entries:

  "dependencies": {
    "apollo-server": "^2.20.0",
    "graphql": "^15.5.0"
  }
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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]
  }
`;


Enter fullscreen mode Exit fullscreen mode

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',
  },
];

Enter fullscreen mode Exit fullscreen mode

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,
  },
};

Enter fullscreen mode Exit fullscreen mode

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}`);
});

Enter fullscreen mode Exit fullscreen mode

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

  • Start the server
node index.js
Enter fullscreen mode Exit fullscreen mode

You should see this:

Alt Text

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
  }
}

Enter fullscreen mode Exit fullscreen mode

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

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

Discussion (0)

Forem Open with the Forem app