I’m running a DigitalOcean App as our team’s backend dev server so that the frontend team doesn’t need to keep pulling updates from the backend, but I need to expose the API schema (ie graphql playground). But I’m not sure how to do it. We can query the backend just fine but we are accustomed to navigating to the api endpoint URL to view the available Schema. Any help is appreciated. I have this defined in my spec file:
ingress:
rules:
- component:
name: frontend
match:
path:
prefix: /
- component:
name: backend
preserve_path_prefix: true
match:
path:
prefix: /admin
- component:
name: backend
preserve_path_prefix: true
match:
path:
prefix: /admin-api
- component:
name: backend
preserve_path_prefix: true
match:
path:
prefix: /health
- component:
name: backend
preserve_path_prefix: true
match:
path:
prefix: /shop-api
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Accepted Answer
Hey 👋
As far as I can tell, at least based on the ingress rules you’ve provided, it looks like that you’re already routing different paths to your backend component.
So to expose the GraphQL playground, you’ll need to add another ingress rule that routes to the specific endpoint where your GraphQL playground is served.
Usually the GraphQL playgrounds are served at /graphql or /graphiql I think. Assuming your backend serves the playground at /graphql, you could add a rule like this:
ingress:
rules:
# ... your existing rules ...
- component:
name: backend
preserve_path_prefix: true
match:
path:
prefix: /graphql
This rule would route requests to /graphql to your backend component, where the GraphQL playground should be served.
If your GraphQL playground is served at a different path, adjust the prefix accordingly.
Also, make sure that your backend is configured to serve the GraphQL playground in your production/staging environment. As far as I remember some frameworks disable it by default in non-development environments for security reasons.
If you’re using Apollo Server, for example, you might need to explicitly enable it:
const server = new ApolloServer({
typeDefs,
resolvers,
playground: true, // Enable playground
introspection: true // Enable introspection (needed for playground)
});
One thing to keep in mind is that exposing GraphQL playgrounds in production environments can pose security risks, so make sure that you are not exposing any sensitive information.
- Bobby
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.