From 75413b61f8c2c56810c8253ef2e0e0d06da23d5b Mon Sep 17 00:00:00 2001 From: Richard Haddad Date: Mon, 29 Aug 2022 22:17:09 +0200 Subject: [PATCH] Expose generated types using global module (#31) * expose generated types using global module fix multi-projects types name conflicts fix operations name conflicts expose UnionToArray util type update README * upgrade to 1.4.0 --- README.md | 87 ++++-- example/.graphqlrc | 4 +- example/index.ts | 2 +- ...{schema.graphql => schema-catalog.graphql} | 1 + example/schema-profile.graphql | 31 +++ example/using-ts-gql-tags.ts | 11 + package.json | 9 +- src/cached/cached-literal-parser.ts | 2 +- src/cached/cached-schema-loader.ts | 3 +- src/create-error-catcher.ts | 2 +- src/extension-config.ts | 4 +- src/generators/generate-bottom-content.ts | 37 ++- .../generate-type-from-literal.test.ts | 25 +- src/generators/generate-type-from-literal.ts | 28 +- .../generate-type-from-schema.test.ts | 33 +-- src/generators/generate-type-from-schema.ts | 25 +- src/index.ts | 4 + src/plugin-config.ts | 11 +- src/plugin.ts | 4 +- .../create-source-updater.test.ts | 259 +++++++----------- src/source-update/create-source-updater.ts | 29 +- src/source-update/parse-ts-gql-tags.ts | 15 + src/tools.ts | 5 - src/utils/create-unique-string.ts | 2 - src/utils/logger.ts | 4 +- src/utils/parse-with-regex.ts | 13 + src/utils/test-utils.ts | 2 + src/utils/union-to-array.ts | 32 +++ tsconfig.build.json | 2 +- 29 files changed, 398 insertions(+), 288 deletions(-) rename example/{schema.graphql => schema-catalog.graphql} (97%) create mode 100644 example/schema-profile.graphql create mode 100644 example/using-ts-gql-tags.ts create mode 100644 src/index.ts create mode 100644 src/source-update/parse-ts-gql-tags.ts delete mode 100644 src/tools.ts delete mode 100644 src/utils/create-unique-string.ts create mode 100644 src/utils/parse-with-regex.ts create mode 100644 src/utils/union-to-array.ts 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 `