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>
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.
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