Paginated GraphQL Data Provider Component

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

UI Component

Changed on:

27 July 2026

Overview

The Paginated GraphQL Data Provider Component is a wrapper component that changes the data context for its descendants, allowing them to consume data from a separate GraphQL query instead of the page-level query.Unlike the GraphQL Data Provider Component, the Paginated GraphQL Data Provider Component executes a single GraphQL request and returns only the requested page of data. It does not automatically retrieve additional pages. Use this component with descendants that manage their own pagination, such as the List Component.

Plugin Name	Core

The standard library of mystique components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.provider.graphql.paginated

Detailed technical description

The primary purpose of the Paginated GraphQL Data Provider Component is to execute an additional GraphQL query and pass the results of that query to its descendant components. Descendants receive data from this provider’s query instead of the page-level query.Unlike the GraphQL Data Provider Component, this component executes a single GraphQL request and returns only the requested page of data. It does not automatically load additional pages and is intended for use with components that manage pagination independently, such as the List Component.Use this component if you:

Need to display data from a different GraphQL query for specific components on the page
Have reached the query complexity limit and need to split up your GraphQL query
Need to retrieve only the requested page of data for descendants that manage pagination, such as the List Component

Using Variables from Different Data Sources

The Paginated GraphQL Data Provider Component can combine multiple sources when resolving GraphQL variables. You can template variable values using:

Page-level context, for example `activeRetailer`
Route parameters through `params`, for example `{{params.id}}`
Page-level GraphQL results, for example `orderById` or `customerById`

At runtime, these templates are evaluated and the resolved values are passed into the provider’s GraphQL query.

1{
2  "component": "fc.provider.graphql.paginated",
3  "props": {
4    "query": "query ($retailer_id: ID!, $id: ID!, $ref: String!) { orderById(id: $id) { id ref } }",
5    "variables": {
6      "retailer_id": "{{activeRetailer.id}}", // from page/context (active retailer)
7      "id": "{{params.id}}",                  // from route URL parameter ?id=...
8      "ref": "{{orderById.ref}}"              // from page-level GraphQL result
9    },
10    "descendants": [
11      ...
12    ]
13  }
14}

Properties

Name	Type	Required	Description
query	`string`	Yes	The GraphQL query to execute
variables	`Record<String, any>`	No	A dictionary of GraphQL variables used by the `query`. Variable values can be templated using page-level context, route parameters, and page-level GraphQL results
descendants	`MystiqueComponentInstance[]`	Yes	The descendants that receive data from this provider

Configuration example

1{
2  "component": "fc.provider.graphql.paginated",
3  "props": {
4    "query": "query ($settings_first: Int) {settings(first: $settings_first) {edges {node {...Listing}}}}",
5    "variables": {
6      "settings_first": 100
7    },
8    "descendants": [
9      {
10        "component": "fc.list",
11        "props": {
12          "dataSource": "settings",
13          "attributes": [
14            {
15              "label": "i18n:fc.admin.settings.index.list.column.name.heading",
16              "template": "{{node.name}}"
17            },
18            {
19              "label": "i18n:fc.admin.settings.index.list.column.value.heading",
20              "template": "{{node.value}}"
21            }
22          ]
23        }
24      }
25    ]
26  }
27}