Coding Data
Coding Data

Reputation: 13

How to change baseUrl dynamically in RTK Query

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. How to dynamicly chane base URL using redux-toolkit?

export const WebApi = createApi({ 
    reducerPath: 'API',
    baseQuery: fetchBaseQuery({ baseUrl: '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>

Upvotes: 1

Views: 4507

Answers (2)

Jamal Fakhriddinov
Jamal Fakhriddinov

Reputation: 158

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

Upvotes: 1

Noor Fahad
Noor Fahad

Reputation: 119

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.

Upvotes: 2

Related Questions