I'm working with RTK query in my react project as a fetching/caching module which is great but after POST a data to my firebase database something like a random id which made up by firebase subcategorizes all my data and disrupts the structure of my data
I put a picture which shows how data getting store on the firebase :
and below code is the RTK query handler
import { createApi, fetchBaseQuery } from "#reduxjs/toolkit/query/react";
import {
AllBurgerType,
BurgerType,
} from "../*********************";
export const burgerApi = createApi({
reducerPath: "burgerApi",
tagTypes: ["Ingredients"],
baseQuery: fetchBaseQuery({
baseUrl:
"https://************************.firebasedatabase.app",
}),
endpoints: (builder) => ({
// I've rid other methods
addIngredients: builder.mutation({
query: (initialIngredients) => ({
url: "/.json",
method: "POST",
body: initialIngredients,
}),
invalidatesTags: ["Ingredients"],
}),
}),
});
export const {
useGetIngredientsQuery,
useAddIngredientsMutation,
useEditIngredientsMutation,
} = burgerApi;
and add new data like on the other file like this :
import { useAddIngredientsMutation } from "../../../../Api/apiSlice";
const [addNewIng, { isLoading, isSuccess }] =
useAddIngredientsMutation();
await addNewIng(store.getState().burger).unwrap();
how should I prevent this
Related
Does anyone know how to prepare headers to match a key given by an API? I'm trying to connect to Urban Dictionary API using a key and host name but I'm unsure how to implement that using redux toolkit.
Here's what I have, I know it's very wrong:
import { createApi, fetchBaseQuery } from "#reduxjs/toolkit/query/react";
import { TWord } from "../../types/wordType";
export const apiSlice = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({
baseUrl: "https://mashape-community-urban-dictionary.p.rapidapi.com/define",
prepareHeaders: (headers) => {
headers.set(
"X-RapidAPI-Key",
"<my key>"
),
headers.set(
"X-RapidAPI-Host",
"mashape-community-urban-dictionary.p.rapidapi.com"
);
},
}),
tagTypes: ["Words"],
endpoints: (builder) => ({
getWord: builder.query({
query: (word: string) => ({
url: `/${word}`,
}),
}),
}),
});
export const { useGetWordQuery } = apiSlice;
Any ideas?
Okay, found the solution:
The query for getting a word needs to be /define?term=${word}, if anyone might need it in the future!
I have a project already configured with Supabase and using Redux-Toolkit. I have never used RTK-Query and I am just learning but after reading in the docs and looking for similar questions I have created a supabaseApi.js file which looks like:
import { createApi, fakeBaseQuery } from '#reduxjs/toolkit/query';
export const supabaseApi = createApi({ baseQuery: fakeBaseQuery(),
endpoints: (builder) =({
getStudents: builder.query({
queryFn: async () ={
const students = await supabase
.from('students')
.select()
return {students, error}
}
})
}) })
export const { useGetStudentsQuery } = supabaseApi;
However, when I call the useGetStudentsQuery() to get the students table I receive an error in the console telling me that "useGetStudentsQuery is not a function". I also noticed that when I begin to write the useGet function, it seems it hasn't been automatically created as I don't get the Visual Studio hints.
What is it that I am doing wrong? Thanks.
A few things:
to have the hooks, you have to import from '#reduxjs/toolkit/query/react';
the queryFn has to return either { data } or { error }, not { student }
your code does not seem to have a error variable, but tries to return it.
so:
import { createApi, fakeBaseQuery } from '#reduxjs/toolkit/query/react';
export const supabaseApi = createApi({ baseQuery: fakeBaseQuery(),
endpoints: (builder) =({
getStudents: builder.query({
queryFn: async () ={
const students = await supabase
.from('students')
.select()
return { data: students }
}
})
}) })
export const { useGetStudentsQuery } = supabaseApi;
I have come across a problem that I do not understand while trying to integrate redux toolkit and more specifically RTK Query into my project. All I want to do is fetch an object array from my backend using a query hook, pass this data into my component and alter some of the elements inside the data based on user actions.
I am copying the incoming array so as not to mutate the original.
I can replace entire objects in the array with 'blah' but if I try to alter a single value within one of the objects I get:
TypeError: Cannot assign to read only property 'title' of object '#<Object>'
This problem didn't arise when I was using fetch().
I have been stuck on this for days!!!
apiSlice
import { createApi, fetchBaseQuery } from '#reduxjs/toolkit/query/react';
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: process.env.devUrl }),
tagTypes: ['categories'],
endpoints: (builder) => ({
getCategories: builder.query({
query: () => 'categories/includingJobs',
transformResponse: (response) => response.data.data,
providesTags: ['categories'],
}),
}),
});
export const { useGetCategoriesQuery} = apiSlice;
Component
import {
useGetCategoriesQuery,
} from '../features/api/apiSlice';
const Test = () => {
const {
data: categories,
isLoading,
isSuccess,
isError,
error,
} = useGetCategoriesQuery();
if (isSuccess) {
let categoriesCopy = JSON.parse(JSON.stringify(categories));
//This is the line that breaks everything. Why?
categoriesCopy[0].title = 'new title';
}
return <h1>Something rendered</h1>;
};
export default Test;
I have a RTK query that's not refreshing it's core content after a delete mutation. Could anyone explain why ? It's not clear to me where the problem lies as there is not refresh request made at any point.
The code looks fine and it's pretty much the same I use in another API that's working. And on this second API I pass the same data (a list of items) and it's refreshing fine after a delete ; here's the code:
:
import { createApi, fetchBaseQuery } from '#reduxjs/toolkit/query/react';
import { Auth, API, Storage } from 'aws-amplify';
// Define a service using a base URL and expected endpoints
export const researchApi = createApi({
reducerPath: 'researchApi',
tagTypes: ['Research'],
baseQuery: fetchBaseQuery({
baseUrl: process.env.NEXT_PUBLIC_API_RESEARCH,
prepareHeaders: async (headers, { getState }) => {
const token = (await Auth.currentSession()).getIdToken().getJwtToken();
headers.set('Authorization', `${token}`);
headers.set('Content-Type', 'application/json');
return headers;
}
}),
endpoints: (builder) => ({
getResearch: builder.query({
query: () => `research`,
providesTags: ['Research']
}),
getResults: builder.query({
query: (id) => `results?searchid=${id}`,
}),
addResearch: builder.mutation({
query(keywords) {
const data = {
keywords: keywords
}
return {
url: `research`,
method: 'POST',
body: data
}
},
invalidatesTags: ['Research']
}),
deleteResults: builder.mutation({
query(results) {
// send array
let sanitized;
sanitized = results.filter(item => item);
const data = {
items: sanitized
}
//console.log('data: ', data);
return {
url: `removeresult`,
method: 'DELETE',
body: data
}
},
invalidatesTags: ['Research']
}),
}),
})
// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetResearchQuery, useGetResultsQuery, useAddResearchMutation, useDeleteResultsMutation } = researchApi
I'm calling the query like this :
const router = useRouter()
const { kwd } = router.query
const { data, error, isError, isLoading } = useGetResultsQuery(kwd);
if(isLoading) {
return (
<>
<Spinner animation="border" size="sm" role="status" />{' '} Please wait while Loading...
</>
)
}
Any idea would be very helpful as I'm completely lost with this...
Ok so problem solved, I didn't add the correct parameters :
getResearch: builder.query({
query: () => research,
providesTags: ['Research']
}),
getResults: builder.query({
query: (id) => `results?searchid=${id}`,
providesTags: ['Research'] // ========> THAT WAS MISSING
}),
Try and also make sure you are returning the correct data from the mutation. Thanks.
Return the correct fields from the mutation. If the required the field, can be id is not returned from the mutation, then there will be no refresh.
I have 2 completely independent components without any parent-child relationship being displayed on a single page.
Component 1 : Makes an API call fetches some records and display it in a table having server side-pagination
Component 2 : Contains a form, when the user submits the form the data in the component 1 needs to be refetch-ed through the backend.
Since I am using fetchBaseQuery to query the data, I believe I need to invalidate the cache in order to make the API call in the component 1.
I tried refetch() to fulfil that requirement but got no luck. I also tried setting the cache timeout using keepUnusedDataFor that too didn't work. Also, tried to do something with the tags, but for that I will have to use mutation instead of query and I am not sure how mutation is useful as per my use case
Here's some of the code :
component1.tsx
let { data, error, isSuccess, isError, isFetching, refetch } = useGetQuery(request, { skip});
const records = data?.records;
React.useEffect(() => {
if (records) {
// set records within table
}
}, [records]);
useGetQuery.ts
const extendedApi = mainApi.injectEndpoints({
endpoints: (builder) => ({
getQuery: builder.query<response, request>({
query: (request?: request) => ({
url: "someURL",
body: request,
method: "POST",
}),
providesTags: ["Requests"],
}),
}),
overrideExisting: true,
});
export const { useGetQuery } = extendedApi;
component2.tsx
let [trigger, data] = useSubmitFormMutation();
const submitForm = (e) => {
e.preventDefault();
trigger(// Some Object);
}
React.useEffect(() => {
if (isSuccess) {
updateRefreshRecords(true); // setting the hook to true to make an API call in component 1
}
}, [isSuccess]);
useSubmitFormMutation.ts
const extendedApi = mainApi.injectEndpoints({
endpoints: (builder) => ({
submitForm: builder.mutation<response, request>({
query: (request?: request) => ({
url: "some_other_url",
body: request,
method: "POST",
}),
invalidatesTags: ["Requests"],
}),
}),
overrideExisting: false,
});
export const { useSubmitFormMutation } = extendedApi;
mainAPI.ts
export const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (args, api, extraOptions) => {
const { mainApiUrl } = (api.getState() as RootState).settings.endpoints;
const rawBaseQuery = fetchBaseQuery({
baseUrl: mainApiUrl,
prepareHeaders: (headers, { getState }) => {
// Use getState to pull the jwtToken and pass it in the headers to the api endpoint.
const { jwtToken } = (getState() as RootState).auth;
headers.set("authorization", jwtToken);
return headers;
},
});
return rawBaseQuery(args, api, extraOptions);
};
export const mainApi = createApi({
reducerPath: "mainApi",
baseQuery: dynamicBaseQuery,
endpoints: () => ({}),
tagTypes: ["Requests"],
});
store.ts
export const store = configureStore({
reducer: {
// other reducers
[localApi.reducerPath]: localApi.reducer,
[mainApi.reducerPath]: mainApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false,
})
.concat(localApi.middleware)
.concat(mainApi.middleware),
});
Can you please help me how can I invalidate the cache as per my use case.
Any help would be highly appreciated
Thanks
You can just add invalidatesTags to your mutation and that should refresh the query:
const extendedApi = mainApi.injectEndpoints({
endpoints: (builder) => ({
submitForm: builder.mutation<response, request>({
query: (request?: request) => ({
url: "some_other_url",
body: request,
method: "POST",
}),
invalidatesTags: ["Requests"]
}),
}),
overrideExisting: false,
});
No need for manual refetching or keepUnusedDataFor.
If that doesn't work, double-check that you added the api's middleware to the middlewares in your configureStore
Simply change your submitForm endpoint to mutation type and invalidate "Requests" tag on this endpoint. This way you don't have to use updateRefreshRecords.
You can then remove below useEffect in Component1.tsx
React.useEffect(() => {
if (refreshRecords) {
refetch();
}
}, [refreshRecords]);
and also remove keepUnusedDataFor: 5, from getQuery endpoint
I am not sure how mutation is useful as per my use case
When form is submitted, you are either creating or updating some data on backend. So, mutation is the right type of endpoint here. Use query type endpoint when you want to fetch some data from backend.