Redux RTK not auto-generating react hooks

Question

Could not find any info on this that explains why its not generating and how to force it to re-generate these hooks.

First I thought I had to run the app to get it to work so did yarn start.

I ended up manually adding them at the bottom export where it should auto-generate according to the documentation. I following this comment here.

Hooks are automatically generated based on the name of the endpoint in the service definition. An endpoint field with getPost: builder.query() will generate a hook named useGetPostQuery.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { 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}`,
    }),
    getMyNewCustomEndpoint: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
  }),
})
// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetPokemonByNameQuery, useGetMyNewCustomEndpoint } = pokemonApi

notice the useGetMyNewCustomEndpoint which I added myself.

Then when I import I see:

import { useGetMyNewCustomEndpoint } from './services/pokemon'

and when I hover over it in my IDE I do see the properties I can use. Tried this with mutations too. Seems to work (confused from all this magic~)

Anyways, the question is still on the title of this post, how do you get the auto-generating to work. Probably missing something simple.

Subroutine

Answer 1

You misread that.

It is automatically generating the hook pokemonApi.useGetPokemonByNameQuery. You define an endpoint and then that property exists on pokemonApi. That's all.

You will have to export that by hand - there is no magic in place to change your files.

Yahiya

oh gotcha. I figured that while implementing but the docs are misleading. Makes it seem like the dev should be waiting for the export to magically appear on their file. Thanks for clarifying. – Subroutine

Answer 2

I stucked at the same point in my nextjs with typescript project. The RTK Query did not provide auto generated hooks for me.

I was using the import line as below:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query";

Then, I changed the import line like below:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

Then, I could see the auto generated hooks and able to export them for usage in the components.

Threnody

Thank you for this answer. I had the same issue, and this also solved it for me. For reference however, my import path is slightly different: import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react"; – Terpsichorean

omg, stuck with half hour – Protestantism

Thanks mate! Was trying from half hour. – Kant

You probably just saved me hours of fumbling, all over a small typo – Shiah

Answer 3

My answer doesn't solve this exact question, but it can help someone with the same trouble. Pay attention about where you'r importing createApi, fetchBaseQuery from. Autoimport, in for example vscode, can import it from @reduxjs/toolkit/dist/query but functions from this path don't provide autogenrated hooks.

Hutchins

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Appellate

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Culminant

Answer 4

I have an issue about RTK generated hook, and it was the generated hook not fetch or call API without any error

I searched Really about that and just find this stackoverflow page and non of answer dose t help me

But finally i figure out the problem and it was really silly and wear Just Change Your Query Name

for example my query name was

export const brandApi = createApi({
  reducerPath: 'brandApi',
  baseQuery: fetchBaseQuery({
    baseUrl: `${BASE_URL}/user`,
  }),
  endpoints: builder => ({
    getBrand: builder.query<IUserResponse, void>({
      query() {
        return {
          url: '/brand',
          credentials: 'include',
        };
      },
    }),
  }),
});

export const { useGetBrandQuery } = brandApi;

And i Just change the name from getBrand to getBrands and it was work fine :)

Nonego