How to change baseUrl dynamically in RTK Query

Question

I am new to the RTK Query and I use Redux ToolKit Query to fetch the data. Question: How do I dynamically change the baseUrl in createApi from the input field in App.js file.

I saw similar question here, but the solutions which was provided doesn't work in my case. https://stackoverflow.com/questions/69568818/how-to-dynamicly-chane-base-url-using-redux-toolkit

`

> export const WebApi = create Api({ reducerPath: 'API', baseQuery:
> fetchBaseQuery({ base Url: 'http://localhost:3001/api' }), endpoints:
> () => ({}), });

`

How to make API call from App.js file, where user can put any kind of API link in the input field and get the result.

something like this:

> `const dynamicUrl = '' <button className="btn" type="button"
> onClick={() => refetch(dynamicUrl)}>       Fetch Data </button>`

Answer 1

You can just put "https://" in your baseUrl and for endpoints you can pass a string which will be your dynamic urlYou can do like this

export const WebApi = createApi({
   reducerPath: 'API',
  baseQuery: fetchBaseQuery({
    baseUrl: "https:",
  }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: (name) => `/${name}`,
    }),
  }),
});

export const { useGetUsersQuery } = usersApi;

In your App.js you can just pass the value

const { data, isLoading, refetch } = useGetUsersQuery('//randomuser.me/api');

Hope it helps

Answer 2

If you pass in a full url (starting with http:// or https://) fetchBaseQuery will skip baseUrl and use the supplied url instead. So you can use the logic that you linked above to just prepend your current baseUrl to the url of the query.