I've created a CRUD app using RTK query with typescript, I've built it by watching a youtube tutorial and everything works fine, but I'm getting three errors in the console: Unchecked runtime.lastError: The message port closed before a response was received. But it doesn't crash the app.
Here is my Repo https://github.com/Adrian333Dev/rtk-query-typescript
It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
PostService.ts :
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";
import { IPost } from "../models/IPost";
export const postAPI = createApi({
reducerPath: "postAPI",
baseQuery: fetchBaseQuery({
baseUrl: "http://localhost:5000",
}),
tagTypes: ["Post"],
endpoints: (build) => ({
fetchAllPosts: build.query<IPost[], number>({
query: (limit: number = 5) => ({
url: "/posts",
params: {
_limit: limit,
},
}),
providesTags: (result) => ["Post"],
}),
createPost: build.mutation<IPost, IPost>({
query: (post) => ({
url: "/posts",
method: "POST",
body: post,
}),
invalidatesTags: ["Post"],
}),
uptadePost: build.mutation<IPost, IPost>({
query: (post) => ({
url: `/posts/${post.id}`,
method: "PUT",
body: post,
}),
invalidatesTags: ["Post"],
}),
deletePost: build.mutation<IPost, IPost>({
query: (post) => ({
url: `/posts/${post.id}`,
method: "DELETE",
}),
invalidatesTags: ["Post"],
}),
}),
});store.ts :
import { postAPI } from "./../services/PostService";
import { combineReducers, configureStore } from "@reduxjs/toolkit";
const rootReducer = combineReducers({
[postAPI.reducerPath]: postAPI.reducer,
});
export const setupStore = () => {
return configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(postAPI.middleware),
});
};
export type RootState = ReturnType<typeof rootReducer>;
export type AppStore = ReturnType<typeof setupStore>;
export type AppDispatch = AppStore["dispatch"];PostContainer.tsx : My Component
import React from "react";
import { IPost } from "../models/IPost";
import { postAPI } from "../services/PostService";
import PostItem from "./PostItem";
const PostContainer = () => {
const { data: posts, isLoading, error } = postAPI.useFetchAllPostsQuery(10);
const [createPost, {}] = postAPI.useCreatePostMutation();
const [uptadePost, {}] = postAPI.useUptadePostMutation();
const [deletePost, {}] = postAPI.useDeletePostMutation();
const handleCreate = async () => {
const title = prompt();
await createPost({ title, body: title } as IPost);
};
const handleRemove = (post: IPost) => {
deletePost(post);
};
const handleUptade = (post: IPost) => {
uptadePost(post);
};
return (
<div className="post__list">
<button onClick={handleCreate}>Add new Post</button>
{isLoading && <h1>Loading</h1>}
{error && <h1>Error</h1>}
{posts &&
posts.map((post) => (
<PostItem
remove={handleRemove}
uptade={handleUptade}
key={post.id}
post={post}
/>
))}
</div>
);
};
export default PostContainer;