Skip to content

DaveAllbirds/apollo-sandbox-devtools

Repository files navigation

Apollo Sandbox - Chrome Extension

CleanShot 2022-08-04 at 09 04 40@2x

Intro

Add a private Chrome Devtools panel for querying any GraphQL endpoint.

Features

Installation

  1. Clone the repo
  2. Change name and description in package.json - The manifest will pull in those values and use them for the Chrome Extention
  3. Run yarn or npm i
  4. Run yarn dev or npm run dev
  5. Load the xxtension in Chrome
    1. Launch chrome://extensions
    2. Enable Developer Mode
    3. Click Load unpacked extension
    4. Select the dist folder in this project (after dev or build)
  6. If you want to build in production, run yarn build or npm run build.

Open Devtools, select the Apollo Sandbox panel, and enter the graphql endpoint you'd like to query.

Contentful Endpoint

https://graphql.contentful.com/content/v1/spaces/{SPACE}
# or for an environment
https://graphql.contentful.com/content/v1/spaces/{SPACE}/environments/{ENVIRONMENT}

Add these header keys:

Header Key Value
Authorization Bearer {{CONTENTFUL_TOKEN}}

After saving, open Settings ⚙️

Add Environment Variables:

{
  "CONTENTFUL_TOKEN": // YOUR_CONTENT_DELIVERY_GRAPHQL_TOKEN
}

Shopify Endpoint

https://{store_name}.myshopify.com/api/2022-07/graphql.json

Add these header keys:

Header Key Value
X-Shopify-Storefront-Access-Token {{STOREFRONT_TOKEN}}

After saving, open Settings ⚙️

Add Environment Variables:

{
  "STOREFRONT_TOKEN": // YOUR_STOREFRONT_TOKEN
}

Verify the variables are activated in the Headers tab underneath the Query section

Notes

To change the name of the panel, open pages/devtools/index.ts and replace "Apollo Sandbox" with the new name:

try {
  chrome.devtools.panels.create(
    "Apollo Sandbox",
    "icon-34.png",
    "src/pages/panel/index.html"
  );
} catch (e) {
  console.error(e);
}

About

Query your GraphQL API within Chrome DevTools

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published