Todos los puntos finales de la API en la que estoy trabajando requieren el mismo conjunto de parámetros de consulta. El usuario debe seleccionar estos parámetros antes de realizar solicitudes a los puntos finales.
Ejemplos de puntos finales
/api/resource-1?param1=valueA¶m2=valueB¶m3=valueC /api/resource-2?param1=valueA¶m2=valueB¶m3=valueC Los valores seleccionados se guardan en Redux Store. Me gustaría personalizar mi baseQuery para agregar estos parámetros de consulta a la URL de la API automáticamente. Estoy buscando algo en fetchBaseQuery que funcione de manera similar a prepareHeaders lo que permite personalizar la URL de consulta.
código hipotético
const baseQuery = fetchBaseQuery({ baseUrl: baseUrl, // THIS PROPERTY DOES NOT EXISTS prepareUrl: (url, { getState }) => { const param1 = (getState() as AppState).config.param; if (param1) { url.searchParams.append('param1', param1); } return url; }, prepareHeaders: (headers, { getState }) => { const token = (getState() as AppState).auth.token; if (token) { headers.set('authorization', `Bearer ${token}`); } return headers; }, }); Leí cómo implementar una consulta base personalizada, pero no quiero perder el comportamiento proporcionado por fetchBaseQuery .
¿Hay algo como la propiedad prepareUrl que permita personalizar la URL de la solicitud? ¿Debo implementar una consulta base personalizada? ¿Cuál es la mejor manera de hacer eso?
Ya estabas en la página correcta en los documentos. El truco es no escribir una baseQuery completamente nueva, sino envolver una baseQuery personalizada "alrededor" de la implementación existente. Este ejemplo muestra cómo hacer eso para obtener una baseUrl dinámica , que debería estar muy cerca de lo que quiere hacer aquí.
Este es mi código de consulta personalizado con el que terminé:
import { fetchBaseQuery } from '@reduxjs/toolkit/query/react' import { FetchArgs } from '@reduxjs/toolkit/dist/query/fetchBaseQuery' import { BaseQueryApi } from '@reduxjs/toolkit/dist/query/baseQueryTypes'; import { RootState } from '../store'; const customQuery = async (args: string | FetchArgs, api: BaseQueryApi, extraOptions: {}) => { args = appendQueryStringParam(args, "Source", "Desktop"); args = appendQueryStringParam(args, "LoginToken", "XYZ"); return await fetchBaseQuery({ baseUrl: 'http://example.com/api' })(args, api, extraOptions); } function appendQueryStringParam(args: string | FetchArgs, key: string, value: string): string | FetchArgs { let urlEnd = typeof args === 'string' ? args : args.url; if (urlEnd.indexOf('?') < 0) urlEnd += '?'; else urlEnd += '&'; urlEnd += `${key}=${value}`; return typeof args === 'string' ? urlEnd : { ...args, url: urlEnd }; } export default customQuery;