dotansimha/graphql-code-generator

Pass the client in the codgen.yml, when using graphql-request with react-query

Open

#5156 opened on Dec 1, 2020

View on GitHub
 (1 comment) (2 reactions) (0 assignees)TypeScript (10,341 stars) (1,295 forks)batch import
help wantedkind/enhancementplugins

Description

Is your feature request related to a problem? Please describe.

When using react-query plugin with graphql-request, it requires you to always pass the client in the generated query like in the provided example:

import { useMyQuery } from './generated';
import { client } from './my-graphql-request-client';

export const MyComponent = () => {
  const { status, data, error, isFetching } = useMyQuery(client, {});
};

Describe the solution you'd like It would be cool to pass the client in the codegen.yml, like for the example you do with the fetch option:

plugins:
  - add:
     content: "import { endpointUrl, fetchParams } from './my-config';"
  - typescript
  - typescript-operations
  - typescript-react-query
config:
  fetcher:
    endpoint: 'endpointUrl'
    fetchParams: 'fetchParams'

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
graphql code generatorreact querygraphql request
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Start by examining the existing fetcher configuration in the react query plugin (likely in packages/plugins/typescript/react query/src/config.ts). Understand how the endpoint and fetchParams options are passed from codegen.yml to the generated hooks. Then, design a similar 'client' option that allows users to specify a client instance. Modify the plugin to accept this option and pass it to the generated useQuery/useMutation hooks. Finally, update the documentation and add tests to cover the new feature.