Express integration in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Express library.

GraphQL

const express = require('[1]');

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

Agraphql

Bmongoose

Capollo-server

Dexpress

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'graphql' instead of 'express' will cause an error.

Using 'apollo-server' is for GraphQL server, not Express.

The Express library is imported using require('express'). This allows us to create an Express app.

2fill in blank

medium

Complete the code to create an Express application instance.

GraphQL

const app = [1]();

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

Aapollo

Bexpress

Cgraphql

Drouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'graphql()' will cause an error because it's not a function here.

Using 'router()' is for routing, not app creation.

Calling express() creates a new Express application instance.

3fill in blank

hard

Fix the error in the code to start the Express server on port 4000.

GraphQL

app.listen([1], () => {
  console.log('Server running on port 4000');
});

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

A4000

B'port 4000'

C'4000'

Dport

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like '4000' can cause unexpected behavior.

Using 'port' without a value is invalid.

The listen method expects a number for the port, not a string.

4fill in blank

hard

Fill both blanks to add a GraphQL endpoint using Express and Apollo Server.

GraphQL

const [1] = require('express-graphql');
app.use('/graphql', [2]({ schema, graphiql: true }));

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

AgraphqlHTTP

BexpressGraphQL

CApolloServer

Dgraphql

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ApolloServer' directly in app.use is incorrect.

Mixing up import names causes errors.

The express-graphql package exports graphqlHTTP which is used as middleware in Express.

5fill in blank

hard

Fill all three blanks to define a simple GraphQL schema and integrate it with Express.

GraphQL

const { [1], GraphQLSchema, GraphQLString } = require('graphql');

const schema = new [2]({
  query: new [3]({
    name: 'RootQueryType',
    fields: {
      hello: {
        type: GraphQLString,
        resolve() {
          return 'Hello world!';
        }
      }
    }
  })
});

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

AGraphQLObjectType

BGraphQLSchema

CGraphQLString

DGraphQLInt

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing GraphQLSchema and GraphQLObjectType.

Using GraphQLInt instead of GraphQLString for the hello field.

We import GraphQLObjectType and GraphQLSchema from 'graphql'. The schema is created with new GraphQLSchema and the query is a GraphQLObjectType.