How to merge between RTK query and redux toolkit - reactjs

Question

I have a redux slice called pendingPost where I add some field to it like car_mileage using my reducers functions and save all this inside my pendingPost slice. Then submit using the data inside the pendingPost reducer
const pendingPostReducer = createSlice({
name: 'pendingPost',
initialState,
reducers: {
...
addPropertyToPendingPost: (state, action) => {
state.savedData = { ...state.savedData, ...action.payload };
},
Also I have postsAPI where I use rtk query to get All Posts, user Posts, ...
export const postsApi = createApi({
baseQuery: fetchBaseQuery({
baseUrl: API_URL,
}),
tagTypes: ['Post'],
endpoints: (build) => ({
getPosts: build.query({
query: (body) => ({
url: `post/filter`,
method: 'POST',
body: body,
}),
providesTags: (result) =>
result
? [
...result.data.map(({ id }) => ({ type: 'Post', id })),
{ type: 'Post', id: 'LIST' },
]
: [{ type: 'Post', id: 'LIST' }],
What I want to do is combine both of these where when I create post I want to do mutation and invalidate. How can I achieve this ?
I tried to search for a way to add save some fields inside RTK query but didn't find a way to achieve that, I guess rtk query is used only for caching and queriess

Answer 1

Your question has two parts.
I think you have a post scenario and you want to add another post to the list and update the posts.
for the first part
I assume you store the posts inside of postPending.(if this slice reducer is for the post so postPending is not a good name for this slice you should name it postSlice and inside of it do everything about the post) and show list of post on a page based on post pending.
in this case, you should go for createAsyncThunk instead of the RTK query. because as you guessed the RTK query purpose is caching the queries.
I don't know this will help you or not but you can dispatch RTK query outside of ApiSlices like so:
dispatch(ApiSlice.endpoints.getPosts.initiate())
for the second part:
I create an example for you in here.
basically, you need to create ApiSlice using RTK query which handles get post. so you have to follow these steps:
1- create API slice
2- create GET query endpoint for fetching the list.
3- use tagTypes to tell RTK query I have these tags.
4- use providesTags for each endpoint you create to tell RTK query I have these variants of tags for this endpoint.
5- when you want to create a POST, PUT, PATCH, or DELETE request to the server you literally case a change to the available list so you need mutations instead of query.
6- in mutations, you will use invalidatesTags to tell RTK query got and find in tags I've already provide for you and remove them if they have the same identity as the tags I invalidate in invalidatesTags.
7- invalidating tags makes the RTK query find out it must re-fetch the query and update the cache.
and you do not need to store posts somewhere else. as you can see I use the query hook in 2 different components and I only make a request once.
since the RTK query knows how many subscriptions you have to the same hook and if cache data is available for that query it will return it to the hook and will not create another request. in other words RTK query Hook will play a role as your postPending slice so don't have to store the data in two places.