Skip to main content

[ ![Redux Logo](/img/redux.svg) ![Redux Logo](/img/redux.svg) **Redux
Toolkit** ](/)

[ Getting Started ](/introduction/getting-started) [ Tutorials
](/tutorials/overview) [ Usage Guide ](/usage/usage-guide) [ API
](/api/configureStore) [ RTK Query ](/rtk-query/overview) [ GitHub
](https://github.com/reduxjs/redux-toolkit)

Search

  * [ Introduction ](/introduction/getting-started)

    * [ Getting Started ](/introduction/getting-started)
    * [ Why Redux Toolkit is How To Use Redux Today ](/introduction/why-rtk-is-redux-today)
  * [ Tutorials ](/tutorials/overview)

    * [ Tutorials Overview ](/tutorials/overview)
    * [ Quick Start ](/tutorials/quick-start)
    * [ TypeScript Quick Start ](/tutorials/typescript)
    * [ RTK Query Quick Start ](/tutorials/rtk-query)
  * [ Using Redux Toolkit ](/usage/migrating-to-modern-redux)

    * [ Migrations ](/usage/migrating-to-modern-redux)

    * [ Usage Guide ](/usage/usage-guide)
    * [ Usage With TypeScript ](/usage/usage-with-typescript)
    * [ Writing Reducers with Immer ](/usage/immer-reducers)
    * [ Setup with Next.js ](/usage/nextjs)
  * [ API Reference ](/api/configureStore)

  * [ RTK Query ](/rtk-query/overview)

    * [ RTK Query Overview ](/rtk-query/overview)
    * [ Comparison with Other Tools ](/rtk-query/comparison)
    * [ Examples ](/rtk-query/usage/examples)
    * [ Usage With TypeScript ](/rtk-query/usage-with-typescript)
    * [ Using RTK Query ](/rtk-query/usage/queries)

    * [ API Reference ](/rtk-query/api/createApi)

  * [ ](/)
  * RTK Query 
  * Usage With TypeScript 

On this page

#  Usage With TypeScript

What You'll Learn

  * Details on how to use various RTK Query APIs with TypeScript 

##  Introduction  ​

As with the rest of the Redux Toolkit package, RTK Query is written in
TypeScript, and its API is designed for seamless use in TypeScript
applications.

This page provides details for using APIs included in RTK Query with
TypeScript and how to type them correctly.

info

**We strongly recommend using TypeScript 4.1+ with RTK Query for best
results.**

If you encounter any problems with the types that are not described on this
page, please [ open an issue ](https://github.com/reduxjs/redux-
toolkit/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) for discussion.

##  ` createApi ` ​

###  Using auto-generated React Hooks  ​

The React-specific entry point for RTK Query exports a version of [ `
createApi ` ](/rtk-query/api/createApi) which automatically generates React
hooks for each of the defined query & mutation [ ` endpoints ` ](/rtk-
query/api/createApi#endpoints) .

To use the auto-generated React Hooks as a TypeScript user, **you'll need to
use TS4.1+** .

  * TypeScript 
  * JavaScript 

    
    
    // Need to use the React-specific entry point to allow generating React hooks  
    import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'  
    import type { Pokemon } from './types'  
      
    // Define a service using a base URL and expected endpoints  
    export const pokemonApi = createApi({  
      reducerPath: 'pokemonApi',  
      baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),  
      endpoints: (builder) => ({  
        getPokemonByName: builder.query<Pokemon, string>({  
          query: (name) => `pokemon/${name}`,  
        }),  
      }),  
    })  
      
    // Export hooks for usage in function components, which are  
    // auto-generated based on the defined endpoints  
    export const { useGetPokemonByNameQuery } = pokemonApi  
    
    
    
    // Need to use the React-specific entry point to allow generating React hooks  
    import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'  
      
    // Define a service using a base URL and expected endpoints  
    export const pokemonApi = createApi({  
      reducerPath: 'pokemonApi',  
      baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),  
      endpoints: (bui