I was reading RTK Query Quick Start tutorial and was trying it in javascript while running it shown me this error.
Example at the corresponding site has shown both Typescript and Javascript code, but sandbox example is in typescript.
src/app/services/pokemon.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const pokemonApi = createApi({
reducerPath:'pokemonApi',
baseQuery: fetchBaseQuery({
baseUrl: 'https://pokeapi.co/api/v2'
}),
enedpoints: (builder)=>({
getPokemonByName: builder.query({
query:(name)=>`pokemon/${name}`,
}),
}),
});
export const { useGetPokemonByNameQuery } = pokemonApi
src/app.jsx
import { useGetPokemonByNameQuery } from './services/pokemon';
export default function App(){
const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur');
return (
<div className="App">
{error ? (
<>Oh no, there was an error</>
) : isLoading ? (
<>Loading...</>
) : data ? (
<>
<h3>{data.species.name}</h3>
<img src={data.sprites.front_shiny} alt={data.species.name} />
</>
) : null}
</div>
);
}
src/app/store.js
import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/dist/query";
import counterReducer from "../features/counter/counterSlice";
import { pokemonApi } from "../services/pokemon";
export const store = configureStore({
reducer:{
counter: counterReducer,
[pokemonApi.reducerPath]: pokemonApi.reducer,
},
middleware: (getDefaultMiddleware)=>
getDefaultMiddleware().concat(pokemonApi.middleware),
});
// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
setupListeners(store.dispatch)
You have a typo there. enedpoints
instead of endpoints
.