javascript - What's the proper way to use RTK Query when dealing with multiple base URLS? - Stack Overflow

admin管理员组

文章数量:1293512

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:

• www.domain-customer <- fetching customer data
• www.domain-order <- can mutate some user data here

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 e 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: "/" }),
  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(
          ``,
           {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?

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:

• www.domain-customer. <- fetching customer data
• www.domain-order. <- can mutate some user data here

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 e 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./" }),
  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./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?

• javascript
• redux
• react-redux
• redux-toolkit
• rtk-query

Share Follow asked Oct 8, 2021 at 8:58 MoniacMoniac 6111 silver badge33 bronze badges 1

• Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Bot Commented Oct 12, 2021 at 3:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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./updateCustomer`,
        // update mutation stuff here
      })
      // write invalidate stuff here
    })

本文标签： javascriptWhat39s the proper way to use RTK Query when dealing with multiple base URLSStack Overflow