Webiny Custom Graphql API
Adding custom GraphQL queries and mutations using GraphQLSchemaFactory.
Install
npx skills add webiny/webiny-js --skill webiny-custom-graphql-api -g -a claude-code -y- Repository
- webiny/webiny-js8.1k
- Category
- Business
- Updated
- 5d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Adding custom GraphQL queries and mutations using GraphQLSchemaFactory. Use this skill when the developer wants to add custom GraphQL endpoints, create custom queries or mutations, add business logic to the API layer, build custom resolvers, inject backend services (identity, tenancy, CMS use-cases) into their GraphQL schema, add authorization checks to resolvers, or build dynamic GraphQL inputs from CMS models. Covers the full pattern from simple queries to complex resolvers with dependency injection and permission transformers.
Custom GraphQL API
TL;DR
Add custom GraphQL queries and mutations using GraphQLSchemaFactory. Implement GraphQLSchemaFactory.Interface, use the schema builder to add type definitions and resolvers (with per-resolver DI), and export with GraphQLSchemaFactory.createImplementation(). Register as <Api.Extension>.
YOU MUST include the full file path with the .ts extension in every src prop. For example, use src={"/extensions/MySchema.ts"}, NOT src={"/extensions/MySchema"}. Omitting the file extension will cause a build failure.
YOU MUST use export default for the createImplementation() call when the file is targeted directly by an Extension src prop. Using a named export (export const Foo = SomeFactory.createImplementation(...)) will cause a build failure. Named exports are only valid inside files registered via createFeature.
The GraphQLSchemaFactory Pattern
The execute method receives a schema builder and returns it after adding type defs and resolvers.
// extensions/mySchema/MyGraphQLSchema.ts
import { GraphQLSchemaFactory } from "webiny/api/graphql";
class MySchema implements GraphQLSchemaFactory.Interface {
async execute(
builder: GraphQLSchemaFactory.SchemaBuilder
): Promise<GraphQLSchemaFactory.SchemaBuilder> {
builder.addTypeDefs(/* GraphQL */ `
extend type Query {
hello: String!
}
`);
builder.addResolver({
path: "Query.hello",
resolver: () => {
return () => "Hello, World!";
}
});
return builder;
}
}
export default GraphQLSchemaFactory.createImplementation({
implementation: MySchema,
dependencies: []
});
Register as an extension:
// extensions/mySchema/Extension.tsx
import React from "react";
import { Api } from "webiny/extensions";
export const MySchema = () => {
return <Api.Extension src={"@/extensions/mySchema/MyGraphQLSchema.ts"} />;
};
