REST vs GraphQL awareness in Express - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple REST GET endpoint in Express.

Express

app.[1]('/users', (req, res) => { res.send('User list'); });

Drag options to blanks, or click blank then click option'

Adelete

Bpost

Cput

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for fetching data.

The get method defines a REST GET endpoint to fetch data.

2fill in blank

medium

Complete the code to define a GraphQL query type in Express using 'graphql' package.

Express

const queryType = new GraphQLObjectType({ name: 'Query', fields: { users: { type: new GraphQLList(GraphQLString), resolve: () => ['Alice', 'Bob'] } } });
const schema = new GraphQLSchema({ [1]: queryType });

Drag options to blanks, or click blank then click option'

Aquery

Bmutation

Csubscription

Dresolver

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'mutation' instead of 'query' for read operations.

The query field defines the root query type in a GraphQL schema.

3fill in blank

hard

Fix the error in this Express REST route that should respond with JSON data.

Express

app.get('/data', (req, res) => { res.[1]({ message: 'Hello' }); });

Drag options to blanks, or click blank then click option'

Ajson

BsendFile

CsendText

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sendFile' or 'render' which are for files or templates.

The json method sends a JSON response, which is standard for REST APIs.

4fill in blank

hard

Fill both blanks to create a GraphQL mutation type and add it to the schema.

Express

const mutationType = new GraphQLObjectType({ name: 'Mutation', fields: { addUser: { type: GraphQLString, args: { name: { type: GraphQLString } }, resolve: (parent, args) => args.[1] } } });
const schema = new GraphQLSchema({ query: queryType, [2]: mutationType });

Drag options to blanks, or click blank then click option'

Aname

Bquery

Cmutation

Dargs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'query' instead of 'mutation' in the schema.

The resolver accesses the argument 'name' to add a user. The schema includes the 'mutation' field for mutations.

5fill in blank

hard

Fill all three blanks to create an Express route that handles a GraphQL query using 'express-graphql'.

Express

import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import { GraphQLSchema, GraphQLObjectType, GraphQLString } from 'graphql';

const app = express();

const queryType = new GraphQLObjectType({ name: 'Query', fields: { hello: { type: GraphQLString, resolve: () => 'Hello World' } } });
const schema = new GraphQLSchema({ [1]: queryType });

app.use('/graphql', graphqlHTTP({ schema: schema, [2]: true, [3]: true }));

app.listen(4000, () => console.log('Server running'));

Drag options to blanks, or click blank then click option'

Aquery

Bgraphiql

Cpretty

Dmutation

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'mutation' with 'query' in the schema.

The schema needs the 'query' field. The 'graphiql' option enables the GraphiQL UI. The 'pretty' option formats JSON responses nicely.