I have a component that use redux toolkit query useGetUserQuery('id') and loading state is handled with isLoading property but I hear that suspense is better for showing a loading screen when requesting an async data.
first, is that true ?
second,
I tried to use it but did not work can any one help me with that ?
App.tsx file
import { Suspense, useState } from 'react'
import api from './api'
import { useDispatch } from 'react-redux'
import User from './User'
import LoadingSpiner from './loadingSpiner'
function App() {
const dispatch = useDispatch()
return (
<>
<Suspense fallback={<LoadingSpiner />}>
<User id='3' />
<div className='w-full flex content-center my-3'>
<button
className='w-3/4 sm:w-1/2 md:w-1/4 lg:w-1/5 bg-green-600 p-3 rounded-xl hover:-translate-y-1 hover:cursor-pointer transition-all hover:shadow-green-800 hover:shadow-md mx-auto text-center'
onClick={e => dispatch(api.util.resetApiState())}>Reset</button>
</div>
</Suspense>
</>
)
}
export default App
The user component
import { useGetUserQuery } from "./api"
type Props = {
id: string
}
export const User = ({ id }: Props) => {
const { data, isLoading } = useGetUserQuery(id)
return (
<>
<div className="flex justify-center content-center py-3 bg-gray-200">
<div className="border border-gray-500 p-3 rounded-s-xl">{isLoading ? 'Loading...V2 from user component' : (data && data.name)}</div>
</div>
</>
)
}
export default User
is always show Loading...V2 from user component
not the loading spine
so I really don't have any idea what is the wrong with it
edit:
apiSlice
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export interface User {
id: number
name: string
username: string
email: string
address: Address
phone: string
website: string
company: Company
}
export interface Address {
street: string
suite: string
city: string
zipcode: string
geo: Geo
}
export interface Geo {
lat: string
lng: string
}
export interface Company {
name: string
catchPhrase: string
bs: string
}
const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
endpoints: (builder) => ({
getUser: builder.query<User,string>({
query: (id) => `users/${id}`,
}),
}),
});
export const { useGetUserQuery } = api;
export default api;
Store
import { configureStore } from '@reduxjs/toolkit'
import api from './api'
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware)
});
export default store
Main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
import './index.css'
import './tailwind.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
)
Currently, RTK Query does not have built-in support for Suspense. If you're interested in using Suspense with RTK Query, you can subscribe to this issue on GitHub to stay updated on any developments or changes related to adding Suspense support to RTK Query. Hope this helps!