4. Architecture of a GraphQL server
2m

Architecture of a GraphQL server

The client sends a GraphQL operation to the server.

The server is a Node process. To craft its response back to the client, it uses:

  • A schema: a .graphql file containing types and fields
  • Resolvers: a .js file containing functions that are responsible for populating a particular field in the schema. Resolvers use data sources to retrieve or manipulate the data for that field.
  • Data source: can be any thing that provides data for the API. For example, a REST API or a database.

Check: Set up the starter code

If you haven't set up the starter code yet, please do so now!

  1. In a terminal window, clone the repository for the workshop starter code:
git clone https://github.com/apollographql-education/workshop-backend-getting-started.git
  1. Navigate to the repo's server/ directory and install dependencies:
cd workshop-backend-getting-started/server
npm install
  1. Start your server:
npm run dev

Tip: Install the VS Code Extension for GraphQL: Syntax Highlighting (by GraphQL Foundation).

Code-Along: Setting up Apollo Server

Walk through starter code in server/src/index.js

src/index.js
const {ApolloServer, gql} = require('apollo-server');
const {readFileSync} = require('fs');
const typeDefs = gql(readFileSync('./src/schema.graphql', {encoding: 'utf-8'}));
const mocks = require('./mocks');
const server = new ApolloServer({
typeDefs,
mocks
});
server.listen({port: process.env.PORT || 4000}).then(({port, url}) => {
console.log(`
🚀 Server is running
🔉 Listening on port ${port}
📭 Query at ${url}
`);
});

Checking our work with Apollo Sandbox

Head over to Apollo Sandbox: https://studio.apollographql.com/sandbox/

  1. Connect to http://localhost:4000.

  2. Build a query for the deleteMe field.

    query GetDeleteMeField {
    deleteMe
    }

    Tip: GraphQL operations should have descriptive names and use PascalCase.

  3. Run the query. You should get:

    {
    "data": {
    "deleteMe": "Hello I am an example to be deleted!"
    }
    }

    Tip: You can view the response in Table View by clicking on the table icon next to the Response heading.

Previous
Next