{"id":19273980,"url":"https://github.com/rintoj/gql-assist-extension","last_synced_at":"2025-08-17T01:05:40.597Z","repository":{"id":244472467,"uuid":"814636287","full_name":"rintoj/gql-assist-extension","owner":"rintoj","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-21T21:16:16.000Z","size":1831,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T22:22:07.453Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rintoj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2024-06-13T11:53:56.000Z","updated_at":"2025-02-21T21:16:19.000Z","dependencies_parsed_at":"2024-06-14T23:59:21.653Z","dependency_job_id":"b3089ec0-4149-4076-8e09-68eba10cee9c","html_url":"https://github.com/rintoj/gql-assist-extension","commit_stats":null,"previous_names":["rintoj/gql-assist-extension"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/rintoj/gql-assist-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fgql-assist-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fgql-assist-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fgql-assist-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fgql-assist-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rintoj","download_url":"https://codeload.github.com/rintoj/gql-assist-extension/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fgql-assist-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270791692,"owners_count":24645796,"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-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":[],"created_at":"2024-11-09T20:44:41.945Z","updated_at":"2025-08-17T01:05:40.521Z","avatar_url":"https://github.com/rintoj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GraphQL Assist\n\nGraphQL Assist is your go-to tool for supercharging GraphQL development. It simplifies writing\nGraphQL queries for Apollo Client by converting them into TypeScript code, making your development\nprocess smoother and error-free. On the server side, GraphQL Assist streamlines API development in\nNestJS by automatically converting TypeScript classes, resolvers, and enums into their GraphQL\ncounterparts, drastically reducing boilerplate code. With robust GraphQL syntax support, including\nfull highlighting and language support for JavaScript, TypeScript, and JSX/TSX, GraphQL Assist\nenhances your coding experience.\n\n## Features\n\nDiscover the power of GraphQL Assist with its suite of robust functionalities:\n\n### React Hook\n\nTransform your GraphQL queries into TypeScript code seamlessly compatible with\n[`@apollo/client`](https://www.apollographql.com/docs/react/). With GraphQL Assist, writing GraphQL\nqueries for Apollo Client becomes a breeze, letting you concentrate on what matters most—building\nyour application.\n\n### Server Side\n\nStreamline your GraphQL API development in a [NestJS](https://docs.nestjs.com/graphql/quick-start)\nenvironment with GraphQL Assist. Automatically convert TypeScript classes, resolvers, and enums into\ntheir GraphQL definitions, slashing boilerplate code and boosting productivity.\n\n- **Model Conversion**: Instantly convert TypeScript classes to NestJS GraphQL Object Types for\n  generating models, inputs, and response types.\n- **Resolver Conversion**: Effortlessly transform resolver methods into GraphQL resolvers with the\n  correct decorators.\n- **Field Resolver Conversion**: Easily convert methods to GraphQL field resolvers with the\n  necessary decorators.\n- **Enum Conversion**: Swiftly transform TypeScript enums to GraphQL enums and register them.\n\n### GraphQL Syntax Support\n\nEnhance your coding experience with full GraphQL syntax highlighting and language support, including\nbracket matching.\n\n- **Syntax Highlighting**: Supports .graphql, .gql, and .graphqls files.\n- **Language Support**: JavaScript, TypeScript, and JSX/TSX (e.g., test.js \u0026 test.ts).\n\n## Installation\n\nEnhance your development experience with the GraphQL Assist extension available on the Visual Studio\nCode Marketplace. This extension provides in-editor completions and suggestions, making it easier to\nwork with GraphQL and NestJS.\n\nUse it in 5 simple steps:\n\n1. **Open**: Open Visual Studio Code.\n2. **Navigate**: Go to the Extensions view by clicking on the Extensions icon in the Activity Bar or\n   by pressing `Ctrl+Shift+X`.\n3. **Search**: Search for \"GraphQL Assist\".\n4. **Install**: Click the Install button to install the extension.\n5. **Enjoy**: Once installed, the extension will provide code completions and suggestions directly\n   within your IDE.\n\nFor additional automation, you can also use the\n[`gql-assist`](https://www.npmjs.com/package/gql-assist) command line tool to automate validations.\n\n## Usage\n\n### React Hook\n\nGraphQL Assist can also help you with writing queries for graphql client by converting GraphQL\nqueries into TypeScript code compatible with `@apollo/client`. With GraphQL Assist, writing GraphQL\nqueries for Apollo Client becomes easier and less error-prone, allowing you to focus more on\nbuilding your application.\n\nUse it with 3 simple steps:\n\n1. Create a file with extension `.gql.ts`\n2. Write the graphql query\n3. Save the file\n\n#### Example\n\nGiven the following GraphQL query:\n\n```ts\nimport gql from 'graphql-tag'\n\nconst query = gql`\n  query {\n    user {\n      name\n    }\n  }\n```\n\nGraphQL Assist will look at the schema and convert it to the following on save:\n\n```ts\nimport { QueryHookOptions, useQuery } from '@apollo/client'\nimport gql from 'graphql-tag'\n\nconst query = gql`\n  query fetchUser($id: ID!) {\n    user(id: $id) {\n      name\n    }\n  }\n`\n\nexport interface RequestType {\n  id: string | undefined\n}\n\nexport interface QueryType {\n  user?: UserType\n}\n\nexport interface UserType {\n  name?: string\n  __typename?: 'User'\n}\n\nexport function useUserQuery(\n  request: RequestType,\n  options?: QueryHookOptions\u003cQueryType, RequestType\u003e,\n) {\n  return useQuery\u003cQueryType, RequestType\u003e(query, {\n    variables: request,\n    skip: !request.id,\n    ...options,\n  })\n}\n```\n\nThis generated TypeScript code includes:\n\n- The converted GraphQL query with typed variables.\n- Interfaces for request variables and query response.\n- A custom hook `useUserQuery` for executing the query with Apollo Client.\n\nNow, you can use `useUserQuery` hook in your components to fetch user data from the GraphQL server\nefficiently.\n\nBy default GraphQL assist will look for schema at the root of all your workspace folders and for the\nname `schema.gql` or `schema.graphql`\n\n### Models\n\nFor GraphQL Assist to recognize and convert a TypeScript class into a GraphQL ObjectType, it should\nbe placed in a file with the extension `.model.ts`.\n\nUse this feature with 3 simple steps:\n\n1. Create a file with extension `.model.ts`\n2. Write the basic structure of the model\n3. Save the file\n\n#### Example\n\nGiven the following TypeScript class:\n\n```ts\nexport class User {\n  id!: string\n  name?: string\n  email?: string\n  bio?: string\n  role?: UserRole\n}\n```\n\nGraphQL Assist will convert it to:\n\n```ts\nimport { Field, ID, ObjectType } from '@nestjs/graphql'\n\n@ObjectType()\nexport class User {\n  @Field(() =\u003e ID)\n  id!: string\n\n  @Field({ nullable: true })\n  name?: string\n\n  @Field({ nullable: true })\n  email?: string\n\n  @Field({ nullable: true })\n  bio?: string\n\n  @Field(() =\u003e UserRole, { nullable: true })\n  role?: UserRole\n}\n```\n\n### Resolvers\n\nFor GraphQL Assist to recognize and convert a resolver method, it should be placed in a file with\nthe extension `.resolver.ts`.\n\nUse this feature with 3 simple steps:\n\n1. Create a file with extension `.resolver.ts`\n2. Write the basic structure of the resolver\n3. Save the file\n\n#### Example\n\nGiven the following TypeScript class:\n\n```ts\nexport class UserResolver {\n  user(id: string, context: GQLContext) {\n    return null\n  }\n}\n```\n\nGraphQL Assist will convert it to:\n\n```ts\nimport { Args, Context, ID, Query, Resolver } from '@nestjs/graphql'\n\n@Resolver()\nexport class UserResolver {\n  @Query()\n  user(\n    @Args({ name: 'id', type: () =\u003e ID })\n    id: string,\n\n    @Context()\n    context: GQLContext,\n  ) {\n    return null\n  }\n}\n```\n\n### Field Resolvers\n\nFor GraphQL Assist to recognize and convert a field resolver method, it should be placed in a file\nwith the extension `.resolver.ts`.\n\nUse this feature with 3 simple steps:\n\n1. Create a file with extension `.resolver.ts`\n2. Write the basic structure of the field resolver\n3. Save the file\n\n#### Example\n\nGiven the following TypeScript class:\n\n```ts\n@Resolver(() =\u003e User)\nexport class UserResolver {\n  fullName(parent: UserType) {}\n}\n```\n\nGraphQL Assist will convert it to:\n\n```ts\nimport { Parent, ResolveField, Resolver } from '@nestjs/graphql'\n\n@Resolver(() =\u003e User)\nexport class UserResolver implements FieldResolver\u003cUser, UserType\u003e {\n  @ResolveField()\n  fullName(\n    @Parent()\n    parent: UserType,\n  ) {}\n}\n```\n\n### Enums\n\nFor GraphQL Assist to recognize and convert enums, they should be placed in a file with the\nextension `.enum.ts`.\n\nUse this feature with 3 simple steps:\n\n1. Create a file with extension `.resolver.ts`\n2. Write an enum\n3. Save the file\n\n#### Example\n\nGiven the following TypeScript enum:\n\n```ts\nexport enum UserStatus {\n  ACTIVE,\n  INACTIVE,\n}\n```\n\nGraphQL Assist will convert it to:\n\n```ts\nimport { registerEnumType } from '@nestjs/graphql'\n\nexport enum UserStatus {\n  ACTIVE = 'ACTIVE',\n  INACTIVE = 'INACTIVE',\n}\n\nregisterEnumType(UserStatus, { name: 'UserStatus' })\n```\n\n## Configuration\n\nThe configuration allows you to customize various aspects of the VS Code extension behavior for\nGraphQL development. Here's a breakdown of what each configuration section entails:\n\n- **Behaviour**: Configure how the extension treats GraphQL properties, default server library, and\n  default number type.\n\n- **Model Generation**: Control automatic generation of NestJS GraphQL Object Types from TypeScript\n  classes on save, including file extension configurations.\n\n- **Resolver Generation**: Control automatic transformation of resolver methods to GraphQL resolvers\n  with decorators on save, including file extension configurations.\n\n- **Input Generation**: Enable automatic generation of input types for GraphQL mutations on save,\n  including file extension configurations.\n\n- **Response Generation**: Enable automatic generation of response types for GraphQL queries and\n  mutations on save, including file extension configurations.\n\n- **Enum Generation**: Enable automatic conversion of TypeScript enums to GraphQL enums and\n  registration, including file extension configurations.\n\n- **React Hook Generation**: Enable automatic generation of React hooks for GraphQL queries and\n  mutations on save, with options for GraphQL library, schema paths, and file extensions.\n\nThese configurations provide flexibility and automation to streamline your GraphQL development\nworkflow directly within VS Code. You can tailor the extension behavior to match your project\nrequirements and coding preferences seamlessly.\n\n### Behaviour\n\n- **Nullable By Default**\n\n  - Treat every property without '!' as nullable.\n  - **Default:** true\n\n- **Server Library**\n\n  - Server library to use.\n  - **Default:** `@nestjs/graphql`\n  - **Options:** `@nestjs/graphql`, `type-graphql`\n\n- **Default Number Type**\n  - How to treat every numeric property by default.\n  - **Default:** `Int`\n  - **Options:** `Int`, `Float`\n\n### Model Generation\n\n- **Enable Model Generation**\n\n  - Enable model generation.\n  - **Default:** true\n  - _On Save, automatically convert TypeScript classes to NestJS GraphQL Object Types._\n\n- **Model File Extensions**\n  - Model file extensions.\n  - **Default:** `[\".model.ts\"]`\n  - _For the extension to process models on save, they should be placed in a file with the extension\n    as per the file extension configuration._\n\n### Resolver Generation\n\n- **Enable Resolver Generation**\n\n  - Enable resolver generation.\n  - **Default:** true\n  - _On Save, automatically transform resolver methods to GraphQL resolvers with appropriate\n    decorators._\n\n- **Resolver File Extensions**\n  - Resolver file extensions.\n  - **Default:** `[\".resolver.ts\"]`\n  - _For the extension to process resolvers on save, they should be placed in a file with the\n    extension as per the file extension configuration._\n\n### Input Generation\n\n- **Enable Input Generation**\n\n  - Enable input generation.\n  - **Default:** true\n  - _On Save, automatically generate input types for GraphQL mutations._\n\n- **Input File Extensions**\n  - Input file extensions.\n  - **Default:** `[\".input.ts\"]`\n  - _For the extension to process inputs on save, they should be placed in a file with the extension\n    as per the file extension configuration._\n\n### Response Generation\n\n- **Enable Response Generation**\n\n  - Enable response generation.\n  - **Default:** true\n  - _On Save, automatically generate response types for GraphQL queries and mutations._\n\n- **Response File Extensions**\n  - Response file extensions.\n  - **Default:** `[\".response.ts\"]`\n  - _For the extension to process responses on save, they should be placed in a file with the\n    extension as per the file extension configuration._\n\n### Enum Generation\n\n- **Enable Enum Generation**\n\n  - Enable enum generation.\n  - **Default:** true\n  - _On Save, automatically convert TypeScript enums to GraphQL enums and registers them._\n\n- **Enum File Extensions**\n  - Enum file extensions.\n  - **Default:** `[\".enum.ts\", \".model.ts\", \".input.ts\", \".response.ts\"]`\n  - _For the extension to process enums on save, they should be placed in a file with the extension\n    as per the file extension configuration._\n\n### React Hook Generation\n\n- **Enable React Hook Generation**\n\n  - Enable React hook generation.\n  - **Default:** true\n  - _On Save, automatically generate React hooks for performing GraphQL queries and mutations._\n\n- **GraphQL Library**\n\n  - GraphQL library to use.\n  - **Default:** `@apollo/client`\n\n- **GraphQL Schema Paths**\n\n  - Paths to GraphQL schema files.\n  - **Default:** `[\"./schema.gql\", \"./schema.graphql\"]`\n\n- **React Hook File Extensions**\n  - React hook file extensions.\n  - **Default:** `[\".gql.ts\"]`\n  - _For the extension to process React hooks on save, they should be placed in a file with the\n    extension as per the file extension configuration._\n\n## Contributing\n\nWe welcome contributions to GraphQL Assist! If you have any ideas, suggestions, or bug reports,\nplease open an issue or submit a pull request on our GitHub repository.\n\n## License\n\nGraphQL Assist is licensed under the MIT License. See the LICENSE file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frintoj%2Fgql-assist-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frintoj%2Fgql-assist-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frintoj%2Fgql-assist-extension/lists"}