Sandbox

# 1. Local: graphql-yoga has built-in GraphiQL
# npm install graphql-yoga graphql

import { createServer } from 'http';
import { createYoga, createSchema } from 'graphql-yoga';

const schema = createSchema({
  typeDefs: \`
    type Query {
      hello(name: String!): String!
    }
  \`,
  resolvers: {
    Query: { hello: (_, { name }) => \`hello, ${name}\` },
  },
});

const yoga = createYoga({ schema });
createServer(yoga).listen(4000, () => {
  console.log('GraphiQL at http://localhost:4000/graphql');
});


# 2. Apollo Sandbox
# Free online: https://studio.apollographql.com/sandbox/
# - Embed locally by mounting Apollo Server with introspection in dev
# - Persists to localStorage; history of past operations


# 3. Hoppscotch
# https://hoppscotch.io - browser, free, supports GraphQL
# - Variables panel, headers, environments
# - Self-hostable for air-gapped use


# 4. Insomnia or Postman
# Both have first-class GraphQL support: schema fetch, autocomplete, variables


# 5. VS Code: GraphQL extension
# Adds syntax highlighting + IntelliSense from a graphql config
# .graphqlrc.yml
schema: https://api.example.com/graphql
documents: 'src/**/*.{ts,tsx,graphql}'


# 6. Production: disable GraphiQL endpoint behind auth
# In Apollo Server:
import { ApolloServer } from '@apollo/server';

const server = new ApolloServer({
  schema,
  introspection: process.env.NODE_ENV !== 'production',
});


# Useful tips
# - Use variables panel, never inline values - prevents fingerprinting in caches
# - Save common queries to a collection for repeatable smoke tests
# - Export curl from your editor for support tickets

# Apollo Sandbox / GraphiQL — paste a query, hit Play.