What you'll learn
  • how to extend Webiny’s GraphQL API

Introduction
anchor

When it comes to backend HTTP API development, Webiny relies on GraphQLexternal link. In fact, all of the Webiny applications, such as Page Builderexternal link and Headless CMSexternal link, 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.

To learn more about the Headless CMS GraphQL API, different API types, support for multiple locales, and more, make sure to check out the Headless CMS GraphQL API key topic.

Getting Started
anchor

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
anchor

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:

extensions/extendGraphqlApi/src/index.ts

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 Playgroundexternal link in the Admin app:

[object Object]Testing the listBooks query in the API Playground
(click to enlarge)

Run yarn webiny watch admin --env ENVIRONMENT_NAME to start the Admin app in the development mode. Replace ENVIRONMENT_NAME with the name of the environment you’re working on.

Additional Examples
anchor