Strapi plugin logo for Apollo Sandbox

Apollo Sandbox
Plugin verified by Strapi

Integrate Apollo Sandbox for a powerful GraphQL Explorer in your Strapi Admin Interface

thumbnail for Apollo Sandbox

Strapi Plugin: Apollo Sandbox

Enhance your Strapi Admin Interface with Apollo Sandbox, an alternative GraphQL Explorer. Simplify development and testing of GraphQL queries and mutations directly within the Strapi Admin Interface. Explore your API schema, test queries in real-time, and iterate faster with this powerful plugin.

NPM Version Monthly download on NPM PRs welcome! Repo stars Support me on Ko-fi



💭 Motivation

There already is a GraphQL Playground plugin for Strapi, why do I need Apollo Sandbox? Well, the current Playground just doesn't provide a good developer experience in my opinion. Apollo Sandbox is a great alternative to the GraphQL Playground with an awesome developer experience. That's why I created this plugin.

⏳ Installation

Install the plugin in your Strapi project.

# using yarn
yarn add @creazy231/strapi-plugin-apollo-sandbox

# using npm
npm install @creazy231/strapi-plugin-apollo-sandbox --save

After successful installation, you've to build a fresh package. To archive that simply use:

yarn build && yarn develop
# or
npm run build && npm run develop

The Apollo Sandbox plugin should appear in the Plugins section of Strapi sidebar after you run the app again.

🔧 Configuration

!IMPORTANT This plugin requires the graphql plugin and its playground to be enabled. You can enable it in the ./config/plugins.ts file in your Strapi project. You also need to modify the ./config/middlewares.ts file and replace strapi::security with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default [
  // ...
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: {
          "frame-src": [ "http://localhost:*", "self", "sandbox.embed.apollographql.com" ],
        },
      },
    },
  },
  // ...
]

After the modification, your file should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: {
          "frame-src": [ "http://localhost:*", "self", "sandbox.embed.apollographql.com" ],
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

🛠️ Plugin Configuration

Config can be changed in the ./config/plugins.ts file in your Strapi project. You can overwrite the config like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
  // ...
  "graphql": {
    enabled: true,
    config: {
      // set this to true if you want to enable the playground in production
      playgroundAlways: false,
    },
  },
  "apollo-sandbox": {
    // enables the plugin only in development mode
    // if you also want to use it in production, set this to true
    // keep in mind that graphql playground has to be enabled
    enabled: process.env.NODE_ENV === "production" ? false : true,
    config: {
      // endpoint: "https://tunneled-strapi.com/graphql", // OPTIONAL - endpoint has to be accessible from the browser
    }
  },
  // ...
};

endpoint configuration is optional. If you don't provide it, the plugin will create a tunnel of your Strapi instance. This is useful if you're developing locally but still want to use the Apollo Sandbox plugin. You can still provide your own tunneled endpoint if you want to.

🖐 Requirements

Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under Installation Requirements.

Supported Strapi versions:

  • Strapi v4.x.x

Node / NPM versions:

  • NodeJS >= 14.21 < 19
  • NPM >= 7.x

We recommend always using the latest version of Strapi to start your new projects.

🤝 Contributing

Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!

⭐️ Show your support

Give a star if this project helped you.

Support me on Ko-fi

🔗 Links

🌎 Community support

License

MIT License Copyright (c) 2023 creazy231.

Install now

npm install @creazy231/strapi-plugin-apollo-sandbox

STATS

8 GitHub stars502 weekly downloads

Last updated

4 days ago

Strapi Version

4.11.5 and above

Author

github profile image for Tobias Thiele
Tobias Thiele

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.