Redux Toolkit - Setting initial state using RTK Query

Question

I'm trying to set the initial state of my contactSlice.ts with an async function using RTK Query.

I've read the docs and searched online but I didn't find a suitable solution for this problem.

contactsAPI.ts:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Contact } from '../models/contact.model';

export const contactsApi = createApi({
    reducerPath: "contactsApi",
    baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3006/" }),
    tagTypes: ['Contact'],
    endpoints: (builder) => ({
        contacts: builder.query<Contact[], void>({
            query: () => '/contacts',
            providesTags: ['Contact']
        }),
        contact: builder.query<Contact, string>({
            query: (id) => `/contacts/${ id }`,
            providesTags: ['Contact']
        }),
        addContact: builder.mutation<{}, Contact>({
            query: contact => ({
                url: '/contacts',
                method: 'POST',
                body: contact    
            }),
            invalidatesTags: ['Contact']
        }),
        updateContact: builder.mutation<void, Contact>({
            query: ({id, ...rest}) => ({
                url: `/contacts/${ id }`,
                method: 'PUT',
                body: rest
            }),
            invalidatesTags: ['Contact']
        }),
        deleteContact: builder.mutation<void, string>({
            query: (id) => ({
                url: `/contacts/${ id }`,
                method: 'DELETE',
            }),
            invalidatesTags: ['Contact']
        })
    })
})

export const {
    useContactsQuery,
    useContactQuery,
    useAddContactMutation,
    useUpdateContactMutation,
    useDeleteContactMutation
} = contactsApi;

contactSlice.ts:

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { Contact } from '../models/contact.model';
import type { RootState } from '../store';

// Define a type for the slice state
interface ContactState {
    value: Contact[]
}

// Define the initial state using that type
const initialState: ContactState = {
    value: //enter async function here
}

export const counterSlice = createSlice({
    name: 'contact',
    // `createSlice` will infer the state type from the `initialState` argument
    initialState,
    reducers: {}
})

export default counterSlice.reducer

I want to set the initialState value using the useContactsQuery from the contactsAPI.ts but I can't figure how how to do it async and enable cathing errors.

Answer 1

You can achieve this action by using the extraReducers like in this example.

Although you should consider not to do it for more consistent Single Source of Truth.

Instead, you should use your rtk API as the store that will be invalidated and refetch when it is needed too automatically.

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { Contact } from '../models/contact.model';
import type { RootState } from '../store';

// Define a type for the slice state
interface ContactState {
    value: Contact[]
}

// Define the initial state using that type
const initialState: ContactState = {
    value: //enter async function here
}

export const counterSlice = createSlice({
    name: 'contact',
    // `createSlice` will infer the state type from the `initialState` argument
    initialState,
    reducers: {},
   extraReducers: (builder) => {
      builder.addMatcher(
        api.endpoints.contacts.matchFulfilled,
        (state, { payload }) => {
           state = payload
       }
    )
  },
})

export default counterSlice.reducer

see more:

RTK Query: dispatch inside query or mutations - github