laststance / vite-rtk-query

Vite template for React + TypeScript + Redux-Toolkit / RTK Query.
MIT License
123 stars 13 forks source link

Untyped auto generated hooks from RTK #1177

Open OkuruchiDan opened 1 month ago

OkuruchiDan commented 1 month ago

The Problem:

When you creating an api slice using createApi method from rtk(specific version for react import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react') it's dose not provide any hook for export from api slice.

Steps to reproduce:

Clone this repo, add example code from rtk with pockemon api.

// 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

Try to export useGetPokemonByNameQuery and you will see that it's type is any

As I understood after research, it's because of vite version.

Dose someone know how to fix this?

ryota-murakami commented 1 month ago

@OkuruchiDan Thanks for reporting this! I'll look into it within three days!