> Note:
> The REST Admin API is a legacy API as of October 1, 2024. All apps and integrations should be built with the [GraphQL Admin API](/docs/api/admin-graphql). For details and migration steps, visit our [migration guide](/docs/apps/build/graphql/migrate).
GraphQL has become Shopify's technology of choice for building APIs. If you're used to working with REST APIs, then GraphQL might seem confusing at first. When you begin using GraphQL, you need to change how you think about retrieving and working with data. The following guides introduce you to GraphQL concepts and help you begin experimenting with GraphQL.
## What is GraphQL?
GraphQL is a query language and a runtime system. Clients form requests by using the GraphQL query language, and the GraphQL server executes the request and returns the data in a response. The following are GraphQL request types:
- **[Queries](/docs/apps/build/graphql/basics/queries)**: Requests to retrieve data, similar to a `GET` request in REST
- **[Mutations](/docs/apps/build/graphql/basics/mutations)**: Requests to create and modify data, similar to a `PUT`, `POST`, or `DELETE` request in REST
Unlike REST APIs, which have different endpoints for each resource, a GraphQL API has a single endpoint for all available data. Clients specify the data they need, for both read and write operations, and the server responds with only that data.
GraphQL request structures resemble JSON. However, GraphQL requests don't use quotes for field names and don't have colons separating field names and values. Responses are in JSON format.
The following is a simple GraphQL query and the JSON response:
<p>
<div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
<script data-option="title" data-value="POST /admin/api/{api_version}/graphql.json"></script>
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="GraphQL query"></script>
<script type="text/plain" data-language="graphql">
query {
product(id: "gid://shopify/Product/10079785100") {
title
handle
createdAt
}
}
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="JSON response"></script>
<script type="text/plain" data-language="json">
{
"data": {
"product": {
"title": "The T-Shirt",
"handle": "the-t-shirt",
"createdAt": "2024-01-27T19:24:10Z"
}
}
}
</script>
</div>
</p>
</div>
</p>
In the JSON response, the structure within the top-level data object mirrors the structure of the corresponding GraphQL request.
### Additional types
In addition to queries and mutations, the GraphQL type system includes the following types:
<table>
<caption>Additional GraphQL types</caption>
<tr>
<th scope="col">Type</th>
<th scope="col">Description</th>
</tr>
<tr>
<td>Scalar</td>
<td>
<p>Primitive data types such as strings, Booleans, and integers. Can also represent unstructured data like a JSON blob. These are the basic building blocks of the GraphQL schema.</p>
<p>GraphQL has the following built-in scalar types:</p>
<ul>
<li><b>Int</b>: A signed 32-bit integer</li>
<li><b>Float</b>: A signed double-precision floating-point value</li>
<li><b>String</b>: A UTF-8 character sequence</li>
<li><b>Boolean</b>: A <code>true</code> or <code>false</code> Boolean value</li>
<li><b>ID</b>: A unique identifier, which is often used either to refetch an object or as the key for a cache. The value isn't intended to be human-readable.</li>
</ul>
</td>
</tr>
<tr>
<td>Enum</td>
<td>
<p>A scalar that's restricted to a set of allowed values.</p>
<p>Enums enable you to validate that arguments of this type are one of the allowed values, and communicate through the type system that a field will always be one of a finite set of values.</p>
</td>
</tr>
<tr>
<td>Object</td>
<td>
<p>A fundamental unit that represents a structured set of data. Object types are collections of readable fields, where each field represents a type in the GraphQL type system and defines the kind of data that you can fetch.</p>
<p>Object types are the most common units in a GraphQL schema, and they enable data to be modeled in a structural and relational way.</p>
</td>
</tr>
<tr>
<td>Input object</td>
<td>
<p>Similar to an object type, but used as input arguments in queries and mutations.</p>
<p>Input objects enable you to pass complex, structured data to mutations.</p>
<p>The key difference between input object and object types is that input objects are for inputs, or arguments to queries and mutations, and objects are for outputs, or data that you can fetch.</p>
</td>
</tr>
<tr>
<td>Interface</td>
<td>
<p>An abstract type that defines a specific set of fields that any object implementing the interface must contain.</p>
<p>This mechanism ensures that different object types implementing the same interface share common fields, and promotes consistency across the objects.</p>
</td>
</tr>
<tr>
<td>Union</td>
<td>
<p>A type that can return one of several specific object types that are defined in the schema.</p>
<p>Unlike interfaces, unions don't enforce common fields between these object types. The object type that's returned in a specific case is determined at runtime. This is useful when a field could return different object types, and these types don't necessarily share any fields.</p>
<p>Refer to an example of the <a href="/docs/api/admin-graphql/latest/queries/discountNode#examples-Retrieve_a_discount_by_its_ID"><code>discount</code> union.</a>
</p>
</td>
</tr>
<tr>
<td>List</td>
<td>An array of another GraphQL type, for example an array of scalars or objects.</td>
</tr>
</table>
## Benefits of GraphQL over REST
Shopify's REST and GraphQL APIs have some similarities. For example, they're versioned, require authentication and explicit access scopes, and enforce rate limits. However, there are several benefits to using GraphQL over REST, summarized in the following table:
<table>
<caption></caption>
<thead>
<tr>
<th scope=“col”>GraphQL</th>
<th scope=“col”>REST</th>
</tr>
</thead>
<tbody>
<tr>
<td scope=“row”>
<p><b>Work with multiple resources in a single query or mutation</b></p>
<p>Use GraphQL features like connections, variables, fragments, and aliases for efficient queries and fetch data from multiple types in one request.</p>
</td>
<td>
<p><b>Work with one resource at a time</b></p>
<p>REST APIs are designed to return a single resource type per endpoint. Fetching associated data often requires multiple calls or chained requests.</p>
</td>
</tr>
<tr>
<td scope=“row”>
<p><b>Request only the data that you need</b></p>
<p>Reduce payload size, improve performance, and reduce over-fetching by requesting the exact data that you need.</p>
</td>
<td>
<p><b>Limited resource filtering</b></p>
<p>Filter top-level resource properties using the <code>fields</code> parameter. However, filtering isn't available for properties of child resources.</p>
</td>
</tr>
<tr>
<td scope=“row”>
<p><b>Strongly typed and part of a schema</b></p>
<p>GraphQL is strongly typed, which provides for safer data handling through validation and autocompletion.</p>
<p>Everything that's available through a GraphQL API is included in its schema.</p>
</td>
<td>
<p><b>Weakly typed and lacking machine-readable data</b></p>
<p>REST data is weakly typed and has fewer validation guardrails. This can lead to errors or unpredictable results due to incorrect data formatting.</p>
</td>
</tr>
<tr>
<td scope=“row”>
<p><b>Shopify knows what data an app is using</b></p>
<p>Shopify knows which fields each app is using, which makes it easier for us to evolve our APIs over time and focus on resources that the community uses.</p>
<p>We can easily mark a part of our schema as deprecated, which is reflected in documentation.</p>
</td>
<td>
<p><b>Shopify doesn’t know what data an app is using</b></p>
<p>When an app requests a REST endpoint, Shopify has no way of knowing if it's actually using every piece of data that's returned. It’s similar to doing a <code>SELECT *</code> to a SQL database.</p>
<p>When Shopify needs to make breaking changes, such as removing an attribute from a response, we can't know which developers the change directly affects. This means that we need to notify all developers who use an endpoint, which creates noise for those who aren't affected.</p>
</td>
</tr>
<tr>
<td scope=“row”>
<p><b>Documentation is a first-class citizen</b></p>
<p>The documentation for a GraphQL API lives side-by-side with the code that constitutes it. Using GraphQL's introspection feature, you can query the schema to explore its contents and documentation.</p>
</td>
<td>
<p><b>Documentation is secondary</b></p>
<p>Most REST APIs lack embedded metadata. Apps are dependent on external documentation that can become out of sync with the API.</p>
</td>
</tr>
</tbody>
</table>
### Example
In GraphQL, you can get information about related objects with a single request to a single endpoint, and scope your request down to only the fields that you need.
For example, in the case of an order, you might want to know the total price, the customer's name, metafields, and the title of other variants belonging to the product in the order.
Using REST, you need to make a request to the following endpoints and filter out unnecessary data:
- `/orders/{order_id}.json`
- `/products/{product_id}/variants.json`
- `/customers/{customer_id}/metafields.json`
Using GraphQL, you can make a single request using connections to get the desired data:
<p>
<div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
<script data-option="title" data-value="Example"></script>
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="Endpoint"></script>
<script type="text/plain" data-language="text">
POST https://{shop}.myshopify.com/admin/api/{api_version}/graphql.json
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="GraphQL query"></script>
<script type="text/plain" data-language="graphql">
query {
order(id:"gid://shopify/Order/5369369690390") {
id
totalPriceSet{
shopMoney {
amount
}
}
customer {
displayName
metafields (first:10) {
edges {
node {
key
value
}
}
}
}
lineItems (first:10) {
edges {
node {
variant {
product {
variants(first:10) {
edges {
node {
title
}
}
}
}
}
}
}
}
}
}
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="JSON response"></script>
<script type="text/plain" data-language="json">
{
"data": {
"order": {
"id": "gid://shopify/Order/5369369690390",
"totalPriceSet": {
"shopMoney": {
"amount": "2099.85"
}
},
"customer": {
"displayName": "Ayumu Hirano",
"metafields": {
"edges": [
{
"node": {
"key": "birth_date",
"value": "1990-02-22"
}
}
]
}
},
"lineItems": {
"edges": [
{
"node": {
"variant": {
"product": {
"variants": {
"edges": [
{
"node": {
"title": "Ice"
}
},
{
"node": {
"title": "Dawn"
}
}
]
}
}
}
}
}
]
}
}
}
}
</script>
</div>
</p>
</div>
</p>
## GraphQL concepts
Refer to the following guides to learn the fundamentals of GraphQL:
<div class="resource-card-grid">
<div>
<a class="resource-card" href="/docs/apps/build/graphql/basics/queries" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/globe"
data-alt-src="/assets/resource-cards/globe-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Queries
</h3>
<p class="resource-card__description">Retrieve data from Shopify using queries.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/apps/build/graphql/basics/mutations" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/build"
data-alt-src="/assets/resource-cards/build-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Mutations
</h3>
<p class="resource-card__description">Create and modify Shopify data using mutations.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/apps/build/graphql/basics/variables" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/blocks"
data-alt-src="/assets/resource-cards/blocks-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Variables
</h3>
<p class="resource-card__description">Write reusable requests using variables.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/api/usage/graphql-basics/advanced" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/growth"
data-alt-src="/assets/resource-cards/growth-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Advanced concepts
</h3>
<p class="resource-card__description">Supercharge your requests using inline fragments, and learn how to build requests that contain multiple queries.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/apps/build/graphql/migrate/learn-how#optimizing-your-requests" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/cheatsheet"
data-alt-src="/assets/resource-cards/cheatsheet-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Optimized requests
</h3>
<p class="resource-card__description">Review some tips for refining requests to optimize performance and lower query costs.</p>
</a>
</div>
</div>
### Additional guides
Refer to the following guides to learn more about how GraphQL APIs work at Shopify:
<div class="resource-card-grid">
<div>
<a class="resource-card" href="/docs/api/usage/pagination-graphql" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/docs"
data-alt-src="/assets/resource-cards/docs-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Pagination
</h3>
<p class="resource-card__description">Retrieve consecutive pages of resources using cursor-based pagination.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/api/usage/gids" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/star"
data-alt-src="/assets/resource-cards/star-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Global IDs
</h3>
<p class="resource-card__description">Learn about the identifiers that Shopify uses for objects in GraphQL.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/api/usage/bulk-operations" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/filesystem"
data-alt-src="/assets/resource-cards/filesystem-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Bulk operations
</h3>
<p class="resource-card__description">Read and write high volumes of data and avoid throttling using asynchronous operations.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/api/usage/rate-limits" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/hearts"
data-alt-src="/assets/resource-cards/hearts-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Rate limits
</h3>
<p class="resource-card__description">Learn about the rate limits for each API.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/apps/build/graphql/migrate/learn-how#understanding-error-handling" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/build"
data-alt-src="/assets/resource-cards/build-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Error handling
</h3>
<p class="resource-card__description">Learn about detecting and recovering from errors in GraphQL.</p>
</a>
</div>
</div>
## Tools and resources
Explore the following developer tools and resources to learn more about Shopify GraphQL APIs. For a complete list of APIs, and for information about the libraries that you can use to interact with them, explore our [API documentation](/docs/api).
<div class="resource-card-grid">
<!-- For .dev assistant links, conditional logic is required to get the relative link so we can open the assistant in the context of the page where the link was clicked. Otherwise, if we use the general path https://shopify.dev?assistant=1, the assistant takes you to the main page and opens there. -->
<p><div>
<a class="resource-card" href="/docs/apps/build/graphql?assistant=1" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/scintillating"
data-alt-src="/assets/resource-cards/scintillating-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
.dev Assistant
</h3>
<p class="resource-card__description">Generate GraphQL operations, convert REST requests to GraphQL operations, and get interactive help with Shopify's AI-powered assistant.<br><br>Trained on Shopify data for high accuracy.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="https://github.com/Shopify/vscode-shopify-dev-assistant" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/tool"
data-alt-src="/assets/resource-cards/tool-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Shopify Dev Assistant VS Code Extension
</h3>
<p class="resource-card__description">Access AI-powered Shopify development help directly within Visual Studio Code, with automatic GraphQL query execution and GraphiQL integration.<br><br>Seamlessly integrates with your local development workflow. Trained on Shopify data for high accuracy.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/api/admin-graphql" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/resource"
data-alt-src="/assets/resource-cards/resource-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
GraphQL Admin API reference
</h3>
<p class="resource-card__description">Consult the complete reference to Shopify’s GraphQL Admin API.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/api/usage/api-exploration/admin-graphiql-explorer" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/tool"
data-alt-src="/assets/resource-cards/tool-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Shopify Admin API GraphiQL explorer
</h3>
<p class="resource-card__description">Browse Shopify’s GraphQL Admin API schema and documentation.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/api/storefront" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/storefront"
data-alt-src="/assets/resource-cards/storefront-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
GraphQL Storefront API reference
</h3>
<p class="resource-card__description">Consult the complete reference to Shopify’s GraphQL Storefront API.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/storefronts/headless/building-with-the-storefront-api/api-exploration/graphiql-storefront-api" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/storefront"
data-alt-src="/assets/resource-cards/storefront-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Shopify Storefront API GraphiQL explorer
</h3>
<p class="resource-card__description">Browse Shopify’s Storefront API schema and documentation.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="https://shopify-graphiql-app.shopifycloud.com/" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/app"
data-alt-src="/assets/resource-cards/app-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Shopify GraphiQL app
</h3>
<p class="resource-card__description">Explore your store's data, and test queries and mutations, using the GraphQL Admin and Storefront APIs.</p>
</a>
</div></p>
</div>