RTK Query with TypeScript

app-store.ts

import { configureStore } from '@reduxjs/toolkit'
import { pokemonApi } from '../services/pokemon'

export const store = configureStore({
	reducer: {
		[pokemonApi.reducerPath]: pokemonApi.reducer,
	},
	// adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
	middleware: (getDefaultMiddleware) =>
		getDefaultMiddleware().concat(pokemonApi.middleware),
})

App.tsx

import React, { useState } from 'react'
import {
	useGetPokemonByIdQuery,
	useGetPokemonByNameQuery,
} from './services/pokemon'

function App() {
	const [id, setId] = useState<number>(5)
	const [name, setName] = useState<string>('bulbasaur')

	const {
		data: pokemonsById,
		isLoading: loading1,
		error: error1,
	} = useGetPokemonByIdQuery(id)

	const {
		data: pokemonsByName,
		isLoading: loading2,
		error: error2,
	} = useGetPokemonByNameQuery(name)

	if (loading1 || loading2) return <div>Loading...</div>
	if (error1 || error2) return <div>Error</div>
	return (
		<div>
			<pre>{JSON.stringify(pokemonsById)}</pre>
			<pre>{JSON.stringify(pokemonsByName)}</pre>
		</div>
	)
}

export default App

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

services-pokemon.ts

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Pokemon } from './types'

export const pokemonApi = createApi({
	baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
	endpoints: (builder) => ({
		//												 ResultType   QueryArg
		//															 v        v
		getPokemonById: builder.query<Pokemon, number>({
			// inferred as `number` from the `QueryArg` type
			//       v
			query: (id) => 'pokemon/' + id,
		}),
		getPokemonByName: builder.query<Pokemon, string>({
			query: (name) => 'pokemon/' + name,
		}),
	}),
})

export const { useGetPokemonByIdQuery, useGetPokemonByNameQuery } = pokemonApi

services-types.ts

// expected return from pokemonApi
export interface Pokemon {
	abilities: [{}]
	id: number
	name: string
	species: {
		name: string
		url: string
	}
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  }
}