What is Payload GraphQL?

Payload GraphQL refers to the GraphQL API provided by Payload, a headless CMS and application framework built with TypeScript, Node.js, React, and MongoDB. Unlike traditional CMS platforms, Payload is code-based and developer-centric, offering a powerful backend that can be extended to power various applications. Its GraphQL API is one of three ways (alongside REST and Local APIs) to interact with your data, providing a flexible and efficient method to query and mutate content, such as the sketches and images from your earlier examples.

Core Features of Payload GraphQL

1. Fully Featured API: Payload’s GraphQL API is automatically generated based on your defined collections (e.g., sketches) and globals. For instance, if you define a sketches collection with an images field as an array, Payload creates corresponding GraphQL types and operations—queries to fetch sketches and mutations to create, update, or delete them, including their image arrays.
2. Single Endpoint: Like most GraphQL implementations, Payload operates on a single endpoint (default: /api/graphql). You send queries or mutations as payloads in HTTP POST requests, specifying exactly what data you need, such as a list of sketches with their image URLs.
3. Array Support: In your multiple image upload scenario, the GraphQL API handles arrays natively. A mutation to update a sketch might accept a payload like { images: [“id1”, “id2”] }, which Payload stores in the backend (e.g., MongoDB) as an array field. Queries can then retrieve this array, enabling tiled image displays in the frontend.
4. Extensibility: You can extend the GraphQL schema with custom queries and mutations. For example, you could add a uploadMultipleImages mutation to handle your image uploads, defining how the payload (an array of image IDs) integrates with the sketch entity.
5. GraphQL Playground: Payload includes a built-in GraphQL Playground (default: /api/graphql-playground) for development, letting you test queries like query { Sketches { images } } or mutations like mutation { updateSketch(id: “123”, data: { images: [“id1”, “id2”] }) { images } }. It’s disabled in production by default for security but can be enabled if needed.