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"> RAW_MD_CONTENTshopify version END_RAW_MD_CONTENT</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"> RAW_MD_CONTENTcd <directory> END_RAW_MD_CONTENT</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"> RAW_MD_CONTENTshopify app dev END_RAW_MD_CONTENT</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"> RAW_MD_CONTENTcd <directory> END_RAW_MD_CONTENT</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"> RAW_MD_CONTENTshopify app dev END_RAW_MD_CONTENT</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>