📎 GraphQL support

[ematipico]

Description

Our most-upvoted request in the discussion is support for linting of GraphQL files. Unfortunately, GraphQL support is not part of our roadmap for 2024. This means the Biome team will be unlikely to pick up this task as we are busy working on other parts of the roadmap. Still, we would like to facilitate GraphQL support if someone is willing to pick up the work.

What is included in this task

• [ ] A parser for GraphQL
• [ ] At least one lint rule for GraphQL to demonstrate the analyzer
• [ ] Support for *.graphql files in the VS Code extension

What is not included in this task

• GraphQL tagged templates
  • Support for tagged templates requires infrastructure that is still being worked on in Biome. We are expected to develop support for tagged templates for CSS use cases such as styled components. Once this is in place, and this GraphQL task is implemented, hopefully GraphQL tagged templates will be easy to implement as well.

Funding

We hope someone wants to implement GraphQL support in Biome, so we would like to offer an incentive: We will open a bounty on Polar.sh, which may be claimed by the first contributor to complete the above tasks. 70% of the bounty will be paid out to the contributor, while the remaining 30% will go to Biome itself for reviews, mentoring, and maintenance of the feature (as well as the Polar.sh commission).

If you are interested in working on this task, please respond in the comments or reach out to us on Discord. To be eligible for the bounty, your PR(s) should be merged into Biome, so proper coordination with the team is important. If someone can show relevant progress, we may also close the bounty to others, so they don't have to be afraid of being "outcompeted".

Please be aware that payout of the bounty depends on pledges from our users. If you would like to see this task implemented, please pledge your support on Polar.sh!

[vohoanglong0107]

I have raised a PR for implementing GraphQL grammar here https://github.com/biomejs/biome/pull/1949

[ematipico]

I removed the formatter from the plan to ship GraphQL. Implementing a formatter isn't an easy task.

This could change in the future if we will be able to secure more funding for the people that are working on this task.

[ematipico]

For anyone subscribed to the issue, we enabled GraphQL support on the playground: https://biomejs.dev/playground/?files.main.gql=dAB5AHAAZQAgAFEAdQBlAHIAeQAgAHsACgAgACAAbQBlADoAIABVAHMAZQByAAoAfQAKACAACgB0AHkAcABlACAAVQBzAGUAcgAgAHsACgAgACAAaQBkADoAIABJAEQACgAgACAAbgBhAG0AZQA6ACAAUwB0AHIAaQBuAGcACgB9AA%3D%3D

Feedback is very welcome!

[eMerzh]

Not 100% sure of the feedback needed, but I've tested a few documents and schema I have here and it parses without issues ... It looks promising 👏

Note prettier panel isn't configured for gql right?

[ematipico]

@eMerzh

No, as for now only parsing is supported.

[ematipico]

Linting is wired: https://biomejs.dev/playground/?lintRules=all&files.main.graphql=cQB1AGUAcgB5ACAAewAKACAAIABtAGUAbQBiAGUAcgAgAEAAZABlAHAAcgBlAGMAYQB0AGUAZAAoAGEAYgBjADoAIAAxADIAMwApAAoAfQA%3D

VSCode support is ready: https://github.com/biomejs/biome-vscode/pull/252

We are still in a bug fixing phase, so we can't merge features just yet in the main branch. Once the bug fixing phase is over we will release a nightly release where you can test the CLi and the LSP

[ematipico]

Formatting is also available in our playground: https://biomejs.dev/playground/?indentStyle=space&quoteStyle=single&jsxQuoteStyle=single&lintRules=all&files.main.graphql=cQB1AGUAcgB5ACAAQgByAG8AdwBzAGUAKAAkAG8AZgBmAHMAZQB0ADoAIABJAG4AdAAsACAAJABsAGkAbQBpAHQAOgAgAEkAbgB0ACwAIAAkAGMAYQB0AGUAZwBvAHIAaQBlAHMAOgAgAFsAUwB0AHIAaQBuAGcAIQBdACwAIAAkAHMAZQBhAHIAYwBoADoAIABTAHQAcgBpAG4AZwApACAAewAKACAAIABiAHIAbwB3AHMAZQAoAGwAaQBtAGkAdAA6ACAAJABsAGkAbQBpAHQALAAgAG8AZgBmAHMAZQB0ADoAIAAkAG8AZgBmAHMAZQB0ACwAIABjAGEAdABlAGcAbwByAGkAZQBzADoAIAAkAGMAYQB0AGUAZwBvAHIAaQBlAHMALAAgAHMAZQBhAHIAYwBoADoAIAAkAHMAZQBhAHIAYwBoACkAIAB7AAoAIAAgACAAIAB0AG8AdABhAGwALAAKACAAIAAgACAAcgBlAHMAdQBsAHQAcwAgAHsACgAgACAAIAAgACAAIAAgACAAdABpAHQAbABlAAoAIAAgACAAIAAgACAAIAAgAHAAcgBpAGMAZQAKACAAIAAgACAAfQAKACAAIAB9AAoAfQA%3D

[ematipico]

Closing this issue as completed. You can start testing formatting and linting using this nightly release: https://github.com/biomejs/biome/releases/tag/cli/v1.8.4-nightly.a579bf7

Let's all congrats @vohoanglong0107 for implementing the parsing, @denbezrukov for implementing the formatting and @vohoanglong0107 (again) for staring the works around linting.

[denbezrukov]

@vohoanglong0107 great job!!

[ematipico]

Thank you @vohoanglong0107 for contributing to close this issue! ⭐

The rewards from this issue, totaling $1,050, has been shared with you.

What now?

1. Create a Polar account
2. See incoming rewards & setup Stripe to receive them
3. Get payouts as backers finalize their payments

If you already have a Polar account setup, you don't need to do anything.