{"id":13998462,"url":"https://github.com/0no-co/GraphQLSP","last_synced_at":"2025-07-23T06:31:45.821Z","repository":{"id":152724696,"uuid":"523454881","full_name":"0no-co/GraphQLSP","owner":"0no-co","description":"TypeScript LSP plugin that finds GraphQL documents in your code and provides diagnostics, auto-complete and hover-information.","archived":false,"fork":false,"pushed_at":"2025-06-29T23:32:51.000Z","size":830,"stargazers_count":422,"open_issues_count":9,"forks_count":15,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-07T20:34:33.716Z","etag":null,"topics":["graphql","typescript"],"latest_commit_sha":null,"homepage":"https://gql-tada.0no.co","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0no-co.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"urql-graphql","open_collective":"urql-graphql"}},"created_at":"2022-08-10T18:29:31.000Z","updated_at":"2025-06-29T13:51:12.000Z","dependencies_parsed_at":"2023-07-24T14:37:54.422Z","dependency_job_id":"e53d943f-8163-41d3-8e86-8960c395b2ec","html_url":"https://github.com/0no-co/GraphQLSP","commit_stats":null,"previous_names":["jovidecroock/graphqlsp"],"tags_count":86,"template":false,"template_full_name":null,"purl":"pkg:github/0no-co/GraphQLSP","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0no-co%2FGraphQLSP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0no-co%2FGraphQLSP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0no-co%2FGraphQLSP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0no-co%2FGraphQLSP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0no-co","download_url":"https://codeload.github.com/0no-co/GraphQLSP/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0no-co%2FGraphQLSP/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266631348,"owners_count":23959419,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","typescript"],"created_at":"2024-08-09T19:01:41.564Z","updated_at":"2025-07-23T06:31:45.801Z","avatar_url":"https://github.com/0no-co.png","language":"TypeScript","readme":"# GraphQLSP\n\nThis is a TypeScript LSP Plugin that will recognise documents in your\nTypeScript code and help you out with hover-information, diagnostics and\nauto-complete.\n\n## Features\n\n- Hover information showing the decriptions of fields\n- Diagnostics for adding fields that don't exist, are deprecated, missmatched argument types, ...\n- Auto-complete inside your editor for fields\n- Will warn you when you are importing from a file that is exporting fragments that you're not using\n\n\u003e Note that this plugin does not do syntax highlighting, for that you still need something like\n\u003e [the VSCode/... plugin](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql-syntax)\n\n## Installation\n\n```sh\nnpm install -D @0no-co/graphqlsp\n```\n\n## Usage\n\nGo to your `tsconfig.json` and add\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"@0no-co/graphqlsp\",\n        \"schema\": \"./schema.graphql\"\n      }\n    ]\n  }\n}\n```\n\nnow restart your TS-server and you should be good to go, ensure you are using the\nworkspace version of TypeScript. In VSCode you can do so by clicking the bottom right\nwhen on a TypeScript file or adding a file like [this](https://github.com/0no-co/GraphQLSP/blob/main/packages/example/.vscode/settings.json).\n\n\u003e If you are using VSCode ensure that your editor is using [the Workspace Version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript)\n\u003e this can be done by manually selecting it or adding a `.vscode/config.json` with the contents of\n\u003e\n\u003e ```json\n\u003e {\n\u003e   \"typescript.tsdk\": \"node_modules/typescript/lib\",\n\u003e   \"typescript.enablePromptUseWorkspaceTsdk\": true\n\u003e }\n\u003e ```\n\n### Configuration\n\n**Required**\n\n- `schema` allows you to specify a url, `.json` or `.graphql` file as your schema. If you need to specify headers for your introspection\n  you can opt into the object notation i.e. `{ \"schema\": { \"url\": \"x\", \"headers\": { \"Authorization\": \"y\" } }}`\n\n**Optional**\n\n- `template` add an additional template to the defaults `gql` and `graphql`\n- `templateIsCallExpression` this tells our client that you are using `graphql('doc')` (default: true)\n  when using `false` it will look for tagged template literals\n- `shouldCheckForColocatedFragments` when turned on, this will scan your imports to find\n  unused fragments and provide a message notifying you about them (only works with call-expressions, default: true)\n- `trackFieldUsage` this only works with the client-preset, when turned on it will warn you about\n  unused fields within the same file. (only works with call-expressions, default: true)\n- `tadaOutputLocation` when using `gql.tada` this can be convenient as it automatically generates\n  an `introspection.ts` file for you, just give it the directory to output to and you're done\n- `tadaDisablePreprocessing` this setting disables the optimisation of `tadaOutput` to a pre-processed TypeScript type, this is off by default.\n- `clientDirectives` this setting allows you to specify additional `clientDirectives` which won't be seen as a missing schema-directive.\n\n## Tracking unused fields\n\nCurrently the tracking unused fields feature has a few caveats with regards to tracking, first and foremost\nit will only track the result and the accessed properties in the same file to encourage\n[fragment co-location](https://www.apollographql.com/docs/react/data/fragments/#colocating-fragments).\n\nSecondly, we don't track mutations/subscriptions as some folks will add additional fields to properly support\nnormalised cache updates.\n\n## Fragment masking\n\nWhen we use a `useQuery` that supports `TypedDocumentNode` it will automatically pick up the typings\nfrom the `query` you provide it. However for fragments this could become a bit more troublesome, the\nminimal way of providing typings for a fragment would be the following:\n\n```tsx\nimport { TypedDocumentNode } from '@graphql-typed-document-node/core';\n\nexport const PokemonFields = gql`\n  fragment pokemonFields on Pokemon {\n    id\n    name\n  }\n` as typeof import('./Pokemon.generated').PokemonFieldsFragmentDoc;\n\nexport const Pokemon = props =\u003e {\n  const pokemon = useFragment(props.pokemon, PokemonFields);\n};\n\nexport function useFragment\u003cType\u003e(\n  data: any,\n  _fragment: TypedDocumentNode\u003cType\u003e\n): Type {\n  return data;\n}\n```\n\nThis is mainly needed in cases where this isn't supported out of the box and mainly serves as a way\nfor you to case your types.\n\n## 💙 [Sponsors](https://github.com/sponsors/urql-graphql)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n   \u003ctd align=\"center\"\u003e\u003ca href=\"https://bigcommerce.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/186342?s=150\u0026v=4\" width=\"150\" alt=\"BigCommerce\"/\u003e\u003cbr /\u003eBigCommerce\u003c/a\u003e\u003c/td\u003e\n   \u003ctd align=\"center\"\u003e\u003ca href=\"https://wundergraph.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/64281914?s=200\u0026v=4\" width=\"150\" alt=\"WunderGraph\"/\u003e\u003cbr /\u003eWunderGraph\u003c/a\u003e\u003c/td\u003e\n   \u003ctd align=\"center\"\u003e\u003ca href=\"https://the-guild.dev/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/42573040?s=200\u0026v=4\" width=\"150\" alt=\"The Guild \"/\u003e\u003cbr /\u003eThe Guild\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n   \u003ctd align=\"center\"\u003e\u003ca href=\"https://beatgig.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/51333382?s=200\u0026v=4\" width=\"100\" alt=\"BeatGig\"/\u003e\u003cbr /\u003eBeatGig\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Local development\n\nRun `pnpm i` at the root. Open `packages/example` by running `code packages/example` or if you want to leverage\nbreakpoints do it with the `TSS_DEBUG_BRK=9559` prefix. When you make changes in `packages/graphqlsp` all you need\nto do is run `pnpm i` in your other editor and restart the `TypeScript server` for the changes to apply.\n\n\u003e Ensure that both instances of your editor are using the Workspace Version of TypeScript\n","funding_links":["https://github.com/sponsors/urql-graphql","https://opencollective.com/urql-graphql"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0no-co%2FGraphQLSP","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0no-co%2FGraphQLSP","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0no-co%2FGraphQLSP/lists"}