Open MaximusFT opened 5 months ago
I don't know where you got that query: ({ url }) => ({ url }),
pattern from, but you're absolutely missing the point what the query
function is for.
Instead of
endpoints: builder => ({
getColorByTransmission: builder.query<BapImages | undefined, BapColorByTransmissionQueryArgs>({
query: ({ url }) => ({ url }),
}),
and
} = useGetColorByTransmissionQuery(
{ url: getUrl(`/qwe/${transmissionId}`), transmissionId },
{ skip: !transmissionId },
);
do
endpoints: builder => ({
getColorByTransmission: builder.query<BapImages | undefined, BapColorByTransmissionQueryArgs>({
- query: ({ url }) => ({ url }),
+ query: ({ transmissionId }) => ({ url: getUrl(`/qwe/${transmissionId}`) }),
}),
and
} = useGetColorByTransmissionQuery(
- { url: getUrl(`/qwe/${transmissionId}`), transmissionId },
+ { transmissionId },
{ skip: !transmissionId },
);
On top of that, if your getUrl
function is something like getUrl = (url) => process.env.BASE + url
, you are further missing the point of baseQuery
and should probably not be using that getUrl
function.
In that case,
const bapApi = createApi({
reducerPath: 'bapApi',
- baseQuery: fetchBaseQuery(),
+ baseQuery: fetchBaseQuery({ baseUrl: process.env.BASE })
and
endpoints: builder => ({
getColorByTransmission: builder.query<BapImages | undefined, BapColorByTransmissionQueryArgs>({
- query: ({ transmissionId }) => ({ url: getUrl(`/qwe/${transmissionId}`) }),
+ query: ({ transmissionId }) => ({ url: `/qwe/${transmissionId}` }),
}),
which you can even more simplify for GET requests as
endpoints: builder => ({
getColorByTransmission: builder.query<BapImages | undefined, BapColorByTransmissionQueryArgs>({
- query: ({ transmissionId }) => ({ url: `/qwe/${transmissionId}` }),
+ query: ({ transmissionId }) => `/qwe/${transmissionId}`,
}),
(Generally, please watch this video course to understand query
and baseQuery
)
Also, your
const bapApi = createApi({
reducerPath: 'bapApi',
also makes me a bit afraid, because usually you should have one single api in your whole application.
I'm gonna be honest: I know these pattern from some YouTube tutorials, and those tutorials are unfortunately not the best quality and show very weird (anti-)patterns.
Maybe before you go deeper into your current discussion, could I motivate you somehow to spend some more time in our documentation? I'm sure when I can spot these problems that quickly, they're not gonna be the only ones.
On the topic: We recommend against copying data from the query cache into your own reducers, because it's very common that it might get stale there and you might miss updates, and your data might stay around even when it is unused and should be cache-collected. I would recommend using the RTK Query cache, maybe with a layer of selectors on top - see deriving data with selectors.
In our company, a dispute arose on the topic of how and where it is better to store and reuse data. Opinions were divided. Here I will give an example.
We have a queue of requests The first request is to obtain vehicle data by its Transmission ID. The second request is to get a gallery of links to pictures for the Interior and Exterior. The third request is to get links to a gallery of 360 degree images for the Interior and Exterior.
One team's solution was this:
Api config
Main hook to chain requests
Reducer and Selectors
Well, naturally, the component called the Hook and received data from the reducer through selectors.
The second command did this:
Main hook to chain requests
Api layout
And as you can see, the API contains
transformResponse
for each request, I will not present them here, I think the logic is clear.Summary
It turns out that one team created a data warehouse, formats everything there as it should, saves it, and takes data from there.
The second team abandoned the Reducer and each time retrieves the transformed data from API queries.
If you compare, there are pros and cons in both options. I would like to know the community’s opinion on what, in your opinion, is the correct way to store data and why?
Additionally, if there are other options, I will be glad to communicate in the comments.
Thank you