如何在 RTK 查询中动态更改 baseUrl

Question

我是 RTK 查询的新手，我使用 Redux ToolKit 查询来获取数据。问题：如何从 App.js 文件中的输入字段动态更改 createApi 中的 baseUrl。

我在这里看到了类似的问题，但提供的解决方案对我的情况不起作用。

`

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

`

如何从 App.js 文件进行 API 调用，用户可以在输入字段中输入任何类型的 API link 并获得结果。

像这样：

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

Answer 1

如果您传入完整的 url (starting with http:// or https://) fetchBaseQuery 将跳过 baseUrl 并改用提供的 url。因此，您可以使用上面链接的逻辑将当前的 baseUrl 添加到查询的 url 之前。

Answer 2

您只需将 "https://" 放入 baseUrl 对于端点，你可以传递一个字符串，这将是你的动态 url 你可以这样做

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

export const { useGetUsersQuery } = usersApi;

在你的App.js中你可以只传递值

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

希望对您有所帮助

如何在 RTK 查询中动态更改 baseUrl

How to change baseUrl dynamically in RTK Query

javascript

reactjs

redux

rtk-query