I have migrated towards RTK and enjoying it immensely so far, but one thing I got stuck on is the following situation:
We have (for keeping it simple's sake) two endpoints:
And the website itself is hosted on another domain.
I need to fetch data from the customer endpoint, but in order to update certain things I need to make a mutation to the order endpoint. At first I thought I should define a createApi per base URL, but then I'm pretty sure I can't have the invalidation. I would like to have this previous mutation invalidate the data for the customer, so that the new data gets refetched.
So this is what I have come up with, but I'd like some input on if this is the way to move forward.
export const customerApi = createApi({
reducerPath: "/../",
baseQuery: fetchBaseQuery({ baseUrl: "https://www.domain-customer.com/" }),
endpoints: (builder) => ({
// write provides tag stuff here
getCustomerExample: builder.query({ query: (name) => `customer/${name}` }),
// please ignore the details of the mutation, I haven't practiced much with it yet.
updateCustomer: builder.mutation({
queryFn: async (name) => {
const response = await fetch(
`https://www.domain-order.com/updateCustomer`,
{update mutation stuff here}
);
const data = await response.json();
return { data };
}
// write invalidate stuff here
})
})
});
Is this the way to go about it? Or should there even be a giant createAPI that will hold all the mutations and queries?
Generally, yes, you should have one single createApi if data is connected enough that you want to invalidate them.
Note that while most examples just show queries to something under baseQuery, you can also just have a url parameter (or string) returned from query that contains a full domain -fetchBaseQuery 100% supports that use case.
So in your case:
updateCustomer: builder.mutation({
query: (name) => ({
url: `https://www.domain-order.com/updateCustomer`,
// update mutation stuff here
})
// write invalidate stuff here
})