Extend GraphQL API

Introduction

When it comes to backend HTTP API development, Webiny relies on GraphQL. In fact, all of the Webiny applications, such as Page Builder and Headless CMS, use it.

In this article, we explain how to extend Webiny’s main GraphQL API. Note that Webiny also provides a separate GraphQL API for the Headless CMS application, which can be extended as well.

Getting Started

To get started, we first scaffold a new API extension in the /extensions/extendGraphqlApi folder, via the following command:

yarn webiny scaffold extension \
	--type api \
	--name extendGraphqlApi \
	--dependencies @webiny/api-serverless-cms

In the example below, we'll be using the createGraphQLSchemaPlugin plugin factory from the @webiny/api-serverless-cms package, so we've included it in the list of dependencies.

Once the extension is scaffolded, in order to start developing, we run the followingwebiny watch command:

yarn webiny watch api --env ENVIRONMENT_NAME

Extending the Main GraphQL API

Let’s extend Webiny’s main GraphQL API with the new listBooks query.

To do this, we use the createGraphQLSchemaPlugin plugin factory from the @webiny/api-serverless-cms package:

With this code in place, we should be able to run the following GraphQL query:

The easiest way to test it is by using the API Playground in the Admin app:

Testing the listBooks query in the API Playground

(click to enlarge)

Additional Examples

• Headless CMS - Extend the GraphQL API
• Page Builder - Extend the GraphQL API