dotansimha / dotansimha/graphql-code-generator

typescript-graphql-request & near-operation-file important improvement.

Open
#5,472 2 comments 7 reactions 0 assignees View on GitHub
help wanted kind/enhancement plugins
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

First of all thank you for these great tools! They are awesome and I use it for all my graphql projects!

So lets dive in to my issue/feature request
**Is your feature request related to a problem? Please describe.**

I have this config ---

```yml
schema:
- http://localhost:8080/v1/graphql
documents:
- ./src/**/*.graphql
generates:
./src/__generated__/introspection-result.ts:
plugins:
- fragment-matcher
./src/__generated__/schema.graphql:
plugins:
- schema-ast
./src/__generated__/types.ts:
plugins:
- typescript
# - typescript-graphql-request
config:
useIndexSignature: true
scalars: ## TODO - add more scalars
float8: number
./src/:
preset: near-operation-file
presetConfig:
baseTypesPath: ./__generated__/types.generated
extension: .generated.ts
plugins:
- typescript-operations
- typescript-graphql-request
```

Using the `typescript-graphql-request`plugin with the `near-operation-file` preset generates for each .graphql file a .ts file correctly with it's own `SDK` like so

File Struct:
```
// File Struct

src
-feature
--feature.graphql
```

```graphql
# feature/feature.graphql

query MyQuery {
Ingredients {
id
isNeedExpirationDate
}
}

query AnotherQuery {
Ingredients {
id
isNeedExpirationDate
currentStock
}
}
```

I will have this output File Struct:
```
// Output File Struct

src
-feature
--feature.graphql
--feature.generated.ts
```

and a generated file that will contain this:

```ts
//feature.generated.ts

export type SdkFunctionWrapper = (action: () => Promise) => Promise;

const defaultWrapper: SdkFunctionWrapper = sdkFunction => sdkFunction();
export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
return {
MyQuery(variables?: MyQueryQueryVariables, requestHeaders?: HeadersInit): Promise {
return withWrapper(() => client.request(print(MyQueryDocument), variables, requestHeaders));
},
AnotherQuery(variables?: AnotherQueryQueryVariables, requestHeaders?: HeadersInit): Promise {
return withWrapper(() => client.request(print(AnotherQueryDocument), variables, requestHeaders));
}
};
}
export type Sdk = ReturnType;
```

now to use it, I would do something like this:

```ts
// File that would use the feature sdk

import {getSdk: getFeatureSdk} from './feature.generated.ts';
```

The thing is, its frustrating having so many `getSdk`'s when looking up an sdk to use, I mean when I would type,
`const x = getSdk`, the autocomplete will suggest me with many `getSdk`'s from many generated files.

**Describe the solution you'd like**
I think it will be great to have the option to rename the `getSdk`(and the `Sdk`, `SdkFunctionWrapper` types) to `getFeatureSdk`, `FeatureSdk`, `FeatureSdkFunctionWrapper`
when using `near-file-operation` preset.
A config option for `typescript-graphql-request` that will add the operation name as a prefix.

Waiting for you response
Thanks,

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.