• Plugins
  • TypeScript
  • rtk-query
Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typescript-rtk-queryDownloadsVersionLicenseSep 26th, 2022

Installation

yarn add -D @graphql-codegen/typescript-rtk-query
⚠️

Usage Requirements In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: … in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won't see any change in the generated output.

Config API Reference

importBaseApiFrom

type: string

Define where to import the base api to inject endpoints into

Usage Examples

generates:
  ./src/app/api/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-rtk-query:
          importBaseApiFrom: 'src/app/api/baseApi'
exportHooks

type: boolean default: false

Whether to export React Hooks from the generated api. Enable only when using the "@reduxjs/toolkit/query/react" import of createApi

Usage Examples

generates:
  ./src/app/api/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-rtk-query:
          importBaseApiFrom: 'src/app/api/baseApi'
          exportHooks: true
overrideExisting

type: string default: undefined

Sets the overrideExisting option, for example to allow for hot module reloading when running graphql-codegen in watch mode. Will directly be injected as code.

Usage Examples

generates:
  ./src/app/api/generated.ts:
    plugins:
      - add:
          content: 'module.hot?.accept();'
      - typescript
      - typescript-operations
      - typescript-rtk-query:
          importBaseApiFrom: 'src/app/api/baseApi'
          overrideExisting: 'module.hot?.status() === "apply"'

Usage Examples

💡

Note: this plugin just injects new endpoints into an existing API you created with createApi, so you still have to define that - but also have all freedom on how to do that.

Using graphql-request

schema: MY_SCHEMA_PATH
documents: './src/**/*.graphql'
generates:
  ./src/app/api/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-rtk-query:
          importBaseApiFrom: 'src/app/api/baseApi'
          exportHooks: true

The generated src/app/api/generated.ts would try to import { api } from 'src/app/api/baseApi', so you have to create that file:

src/app/api/baseApi.ts
import { createApi } from '@reduxjs/toolkit/query/react'
import { graphqlRequestBaseQuery } from '@rtk-query/graphql-request-base-query'
import { GraphQLClient } from 'graphql-request'
 
export const client = new GraphQLClient('/graphql')
 
export const api = createApi({
  baseQuery: graphqlRequestBaseQuery({ client }),
  endpoints: () => ({})
})

From that point on, you can import the generated hooks from src/app/api/generated.ts:

src/components/MyComponent.ts
import { useMyQuery } from 'src/app/api/generated'
 
export const MyComponent = () => {
  const { data, isLoading } = useMyQuery({ page: 5 })
}

Extending generated code

You can import the generated code into a new file and use api.enhanceEndpoints to add lifecycle hooks or providesTags/invalidatedTags information to your api:

src/аpp/api/enhanced.ts
import { api as generatedApi } from 'src/app/api/generated'
 
export const api = generatedApi.enhanceEndpoints({
  addTagTypes: ['User'],
  endpoints: {
    GetUserById: {
      providesTags: (result, error, arg) => [{ type: 'User', id: arg.userId }]
    }
  }
})
 
export const { useGetUserByIdQuery } = api

Make sure that this file is referenced from your code so that the enhanced endpoints are usable. The easiest way to do this is to re-export the hooks in this file and import them exclusively from it.

Setting an authentication header after a Mutation

You can also use this to set an "authentication" header after a login mutation:

import { api as generatedApi } from 'src/app/api/generated'
import { client } from 'src/app/api/baseApi'
 
export const api = generatedApi.enhanceEndpoints({
  endpoints: {
    Login: {
      async onQueryStarted(arg, { queryFulfilled }) {
        const { data } = await queryFulfilled
        client.setHeader('authentication', `Bearer ${data.token}`)
      }
    }
  }
})
 
export const { useLoginMutation } = api
Last updated on August 10, 2022
resolversstencil-apollo