Getting Started

Please note that we require a signed GraphQL Specification Membership agreement before landing a contribution. This is checked automatically when you open a PR. If you have not signed the membership agreement (it's free), you will be prompted by the EasyCLA bot. For more details, please see the GraphQL WG repo.

First, you will need the latest git, yarn 4, & node 18 or greater. macOS, Windows and Linux should all be supported as build environments.

[!WARNING]

None of the commands below will work with npm. Please use yarn in this repo.

Fork this repo by using the "Fork" button in the upper-right

Check out your fork

git clone [email protected]:your-name-here/graphiql.git

Install or Update all dependencies
sh
```
yarn
```
Build all interdependencies so the project you are working on can resolve other packages

First, you'll need:
sh
```
yarn build
```
or
sh
```
yarn build:watch
```
If you are focused on GraphiQL development, you can run:
sh
```
yarn dev:graphiql
```
Get coding! If you've added code, add tests. If you've changed APIs, update any relevant documentation or tests. Ensure your work is committed within a feature branch.
Ensure all tests pass and build everything
sh
```
yarn test
```

Fix CI issues with linting

If you have prettier or eslint --fix-able issues you see in CI, use —

yarn format

If you see typescript build issues, do a yarn build locally, and make sure the whole project references tree builds. Changing interfaces can end up breaking their implementations.

Run tests for GraphiQL:

yarn test graphiql will run all tests for graphiql. You can also run tests from a workspace, but most tooling is at the root.
yarn test --watch will run jest with --watch
yarn e2e at the root will run the end-to-end suite
yarn start-monaco will launch webpack dev server for the monaco editor example with GitHub API from the root. This is the fastest way to test changes to graphql-language-service-interface, parser, etc.

If you want these commands to watch for changes to dependent packages in the repo, then run yarn build --watch alongside either of these.

Developing for GraphiQL

If you want to develop just for graphiql, you won't need to execute commands from the package subdirectory at packages/graphiql.

First, you'll need to yarn build all the packages from the root.

Then, you can run yarn dev:graphiql command, which will launch vite dev server for GraphiQL.

text

VITE v6.3.4  ready in 1015 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

Developing Monaco GraphQL

First run yarn.
Run yarn tsc --watch to watch monaco-graphql and graphql-language-service in one screen session/terminal tab/etc
In another session, run yarn start-monaco from anywhere in the repository aside from an individual workspace.
Alternatively to the webpack example, or in addition, you can run monaco or next.js examples, though these examples are simpler. They also require their own yarn or npm install as they are excluded from the workspaces resolved on global yarn install