Forma correcta de llamar al punto de acceso de consulta RTK select() sin argumentos (y omitir opciones)
Me gustaría usar la función endpoint.select()
para crear selectores a partir de datos en caché de RTK Query. Ver Patrones avanzados de RTK.
La documentación establece claramente que si no hay un argumento de consulta, puedes pasar undefined a select()
(ver la sección Seleccionar datos de usuarios).
Sin embargo, en mi caso esto no funciona a menos que active la consulta mediante la función initiate(). Por otro lado, cuando activo la consulta desde el gancho de consulta, el selector falla en recuperar los datos en caché.
La configuración que no funciona aquí es bastante simple:
export const productsApi = createApi({
baseQuery: fetchBaseQuery({ baseUrl: API.ENDPOINTS.PRODUCTS }),
reducerPath: 'productsApi',
endpoints: (builder) => ({
listAllProducts: builder.query({
query: ()=>'list',
}),
}),
});
export const { useListAllProductsQuery } = productsApi;
Luego en un gancho personalizado, llamo al gancho useListAllProducts:
const {
data,
} = useListAllProductsQuery({skip:shouldSkip});
Y finalmente en el selector:
export const selectProducts =
productsApi.endpoints.listAllProducts.select(); // parámetro undefined según las recomendaciones de la documentación
Posible solución: (o más bien una solución alternativa):
Curiosamente, descubrí que si paso un argumento (llamado cacheKey) a la función select y paso ese mismo cacheKey al gancho de consulta, de repente todo funciona (aunque la documentación indica que esto no es necesario). Por lo tanto, el código modificado se ve así:
// en el selector
export const selectProducts =
productsApi.endpoints.listAllProducts.select('products');
// en el gancho
const {
data,
} = useListAllProductsQuery('products');
Me pregunto si alguien puede brindar algún conocimiento sobre por qué esto funciona, o incluso mejor, si puede recomendar la mejor práctica para utilizar la función select en una consulta sin cacheKey (ya que la documentación parece incorrecta o desactualizada).
También quiero señalar que al llamar a select()
sin un parámetro, aparece una advertencia de TypeScript que indica que se requiere un parámetro.
davy.ai
Usando
endpoint.select()
para crear selectores a partir de datos de consulta en caché de RTK QuerySi estás intentando utilizar la función
endpoint.select()
para crear selectores a partir de datos de consulta en caché de RTK Query y encuentras que no funciona correctamente, hay algunas cosas que puedes probar.En primer lugar, es importante tener en cuenta que la documentación de RTK Query establece que si no hay un argumento de consulta, puedes pasar
undefined
aselect()
. Sin embargo, en algunos casos esto puede no funcionar, especialmente si estás llamando al gancho de consulta y no a la funcióninitiate()
.Para evitar este problema, puedes pasar una clave de caché como argumento a la función
select()
, y luego pasar la misma clave de caché al gancho de consulta. Esto parece ayudar a que todo funcione correctamente, aunque no se mencione explícitamente en la documentación.También es importante tener en cuenta que al llamar a
select()
sin un parámetro, puede aparecer una advertencia de TypeScript que indica que se requiere un parámetro. Esto no debería causar ningún problema, pero es algo de lo que debes estar consciente.En general, la mejor práctica para utilizar la función
select()
en una consulta sin una clave de caché puede no ser del todo clara o consistente, por lo que puede ser útil experimentar con diferentes enfoques hasta encontrar el que funcione mejor para tu caso de uso específico.