diff --git a/README.md b/README.md index d4b42d4..0d2d3b3 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Then add plugin to your `tsconfig.json` } ``` -Since this plugin use [graphql-config](https://www.graphql-config.com/docs/user/user-introduction) you should add a config file targeting your GraphQL schema. +Since this plugin uses [graphql-config](https://www.graphql-config.com/docs/user/user-introduction) you should add a config file targeting your GraphQL schema. ```jsonc // .graphqlrc @@ -78,21 +78,15 @@ gql(` ## Configuration -Configuration can be done at 2 levels: in tsconfig.json and in graphql-config file. +Configuration can be done at 2 levels: in `tsconfig.json` and in `graphql-config` file. ### tsconfig.json -| Property | Description | -| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| graphqlConfigPath | Optional. Path to GraphQL config file. By default `graphql-config` will lookup to current directory [multiple file naming](https://www.graphql-config.com/docs/user/user-usage#config-search-places). | -| logLevel | Optional. Plugin log level. Values `'default'` - `'verbose'` - `'debug'`. Default `'default'`. | -| projectNameRegex | Optional. For multi-projects GraphQL config, regex for extracting project name from operation. | +Checkout config type & default values in [plugin-config.ts](./src/plugin-config.ts). > Log level `'debug'` writes log files into `ts-gql-plugin-logs` directory. When running by VSCode this directory can be hard to find, checkout TSServer logs where files paths are logged. > These logs contain updated code with hidden types generated by plugin. -> Checkout config type in [plugin-config.ts](./src/plugin-config.ts). - ### graphql-config You can add project-related configuration using extension `"ts-gql"`. @@ -114,11 +108,7 @@ You can add project-related configuration using extension `"ts-gql"`. } ``` -| Property | Description | -| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| codegenConfig | Optional. [graphql-codegen](https://www.graphql-code-generator.com/) configuration, using plugins [typescript](https://www.graphql-code-generator.com/plugins/typescript/typescript#config-api-reference) and [typescript-operations](https://www.graphql-code-generator.com/plugins/typescript/typescript-operations#config-api-reference) configuration. | - -> Checkout config type in [extension-config.ts](./src/extension-config.ts). +Checkout config type in [extension-config.ts](./src/extension-config.ts). ### Multi-projects configuration @@ -180,6 +170,69 @@ gql(` With this kind of configuration, each of these operations match corresponding project, so its own schema. +## Use of generated types + +Even if this plugin allows you to avoid code generation, you may want to use generated types. +For this kind of use a global module is exposed. Named `TsGql`, you can access from it every generated types. + +```ts +gql(` + query ProfileAuth { + ... + } +`); + +const authInput: TsGql.ProfileAuthInput = { + username, + password, +}; +``` + +To use `TsGql` in a file without `gql` uses, you should put a `@ts-gql` tag with the project name you want to use, anywhere in your file. +This is the only way for `ts-gql-plugin` to know without performance impact when you want to access generated types. + +```ts +// @ts-gql Profile + +const authInput: TsGql.ProfileAuthInput = { + username, + password, +}; +``` + +### Enums + +Since enums persist on runtime, they cannot be exposed by `ts-gql-plugin`. To solve this issue, types are generated instead of enums. + +```gql +# schema-profile.graphql + +enum OAuthProvider { + GOOGLE + FACEBOOK +} +``` + +So this enum can be used like that: + +```ts +// @ts-gql Profile + +const provider: TsGql.ProfileOAuthProvider = 'GOOGLE'; +``` + +Also you may want to list every possible values from a GraphQL enum, like to be used with HTML `