dotansimha / dotansimha/graphql-code-generator-community

exposeFetcher with custom fetcher func does not work as expected

Open
#215 2 comments 4 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Describe the bug

Does not work with these settings:

```yml
fetcher: # applicable for react-query
func: './../../@hasura-graphql/hooks/useHasura#useHasuraFetcher' # yes, the path is correct
isReactHook: true
```

### Steps to Reproduce the Bug or Issue

Follow the docs to reproduce the issue: https://www.graphql-code-generator.com/plugins/typescript/typescript-react-query#usage-example-isreacthook-false

### Expected behavior

```js
export const useGetShopByShopDomainQuery = <
TData = GetShopByShopDomainQuery,
TError = unknown
>(
variables: GetShopByShopDomainQueryVariables,
options?: UseQueryOptions
) =>
useQuery(
['GetShopByShopDomain', variables],
fetcher(GetShopByShopDomainDocument, variables),
options
);

useGetShopByShopDomainQuery.getKey = (variables: GetShopByShopDomainQueryVariables) => ['GetShopByShopDomain', variables];

// Excepted this, an exported fetcher
useGetShopByShopDomainQuery.fetcher = (variables: GetShopByShopDomainQueryVariables) => fetcher(GetShopByShopDomainDocument, variables);
```

### Platform

```json
{
"graphql": "^16.5.0",
"react-query": "3",
"@graphql-codegen/cli": "^2.6.3",
"@graphql-codegen/typescript": "^2.5.1",
"@graphql-codegen/typescript-operations": "^2.4.2",
"@graphql-codegen/typescript-react-query": "^3.5.14"
}
```

### Codegen Config File

```yml
schema:
- ${HASURA_ENDPOINT}:
headers:
x-hasura-admin-secret: ${HASURA_SECRET}
documents: 'src/@hasura-graphql/{queries,mutations}/*.graphql'
generates:
./src/@hasura-graphql/generated/react-query.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-query
config:
pureMagicComment: true # enforce tree-shaking
exposeQueryKeys: true # to prefetch queries (SSR)
exposeMutationKeys: true
fetcher: # applicable for react-query
endpoint: ${HASURA_ENDPOINT}
fetchParams:
headers:
x-hasura-admin-secret: ${HASURA_SECRET}
#func: './../../@hasura-graphql/hooks/useHasura#useHasuraFetcher'
#isReactHook: true
exposeFetcher: true
./src/@hasura-graphql/generated/graphql-request.ts:
plugins:
- typescript
- typescript-operations
- typescript-graphql-request
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the TypeScript React Query usage example in the linked documentation and reproduce the configuration using a custom fetcher with isReactHook enabled. Inspect the generated react-query.ts output and the exposeFetcher handling, comparing it with the expected exported fetcher shown in the issue. Done means the generated hook exposes the custom fetcher with the expected signature and existing generation behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
developer-experience, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.