GraphiQL is an in-browser tool for writing, validating, and testing GraphQL queries. When working with Shopify's GraphQL Admin API, GraphiQL can be useful for the following tasks:

* Learning about the available queries and mutations
* Executing specific queries and mutations to extract information or accomplish tasks

For more information on GraphQL Admin API queries, refer to the [GraphQL Admin API reference](/docs/api/admin-graphql).

## Execute queries on your store

You can use GraphiQL to interact with your store's data in the following ways.

### Install the GraphiQL app

To build queries and mutations on your development store, [install Shopify's GraphiQL app](https://shopify-graphiql-app.shopifycloud.com/).

Some scopes aren't available within the GraphiQL app. The app also can't be used to access data owned by other apps. If you're developing an app, then you should [use a local GraphiQL instance](#use-a-local-graphiql-instance) instead.

### Use a local GraphiQL instance

If you are developing an app using [Shopify CLI](/docs/apps/build/cli-for-apps), you can launch GraphiQL while running the [`dev`](/docs/api/shopify-cli/app/app-dev) command by tapping the `g` key.

Shopify CLI's GraphiQL instance connects as your app, so it has the same access scopes as your app, and it can access data owned by your app. It can't access data owned by other apps.

## Execute queries from GraphQL code blocks

If you're running a local app server with Shopify CLI, then you can send GraphQL examples to GraphiQL using the **Open in GraphiQL** button. Access this feature in example code blocks on the references, and on code blocks inside of the Dev Assistant.

You need to use Shopify CLI version 3.74.0 or higher. You can check your Shopify CLI version by running the following command:

<p>
<div class="react-code-block" data-preset="terminal">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></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 type="text/plain" data-language="bash">
shopify version
</script>

</div>
</p>


> Tip:
> If you need to upgrade to the latest Shopify CLI version, then you can run the [install](/docs/api/shopify-cli#installation) command.

### Existing apps

If you've already started developing an app using [Shopify CLI](/docs/apps/build/cli-for-apps), then complete the following steps:

1. Navigate to your app directory:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></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 type="text/plain" data-language="bash">
    cd <directory>
    </script>

    </div>
    </p>


1. Use the Shopify CLI [`dev` command](/docs/api/shopify-cli/app/app-dev) to start the app preview:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></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 type="text/plain" data-language="bash">
    shopify app dev 
    </script>

    </div>
    </p>


1. To execute GraphQL code examples, click **Run in GraphiQL** in the code block.

### New apps

If you haven't started developing an app yet, then complete the following steps:

1. [Install Shopify CLI](/docs/api/shopify-cli#installation).
1. [Scaffold an app](/docs/apps/build/scaffold-app).
1. Navigate to your app directory:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></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 type="text/plain" data-language="bash">
    cd <directory>
    </script>

    </div>
    </p>


1. Use the Shopify CLI [`dev` command](/docs/api/shopify-cli/app/app-dev) to start the app preview:

    <p>
    <div class="react-code-block" data-preset="terminal">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar "></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 type="text/plain" data-language="bash">
    shopify app dev 
    </script>

    </div>
    </p>


1. To execute GraphQL code examples, click **Run in GraphiQL** in the code block.

## Execute queries on a demo store

This is a read-only demo which can execute queries without needing to connect to a development store.

- Click **Explorer** and use checkboxes and fields to build GraphQL queries.
- Click **Docs** to expand the **Documentation Explorer**. You can search schemas to view descriptions and supported fields.

Launch GraphiQL in its <a href="/graphiql/admin-graphiql" target="_blank">own window</a>.

<iframe src="/graphiql/admin-graphiql" style="border: 0; height: 660px; width: 100%;"></iframe>