I'm looking to pass an ID value successfully stored in Redux state to a RTK Query, for dynamic fetching behaviour.
However, when I pass the state object through, I only receive a partial response of an array of varying lengths (sometimes no objects, sometimes two, very occasionally the whole response).
src/features/api/apiPayrollEntries.ts
// READ All Payroll Entries by Payroll ID
getAllPayrollEntriesByPayrollId: builder.query<PayrollEntry[], string>({
query: (payrollId) => `/payroll-entries/payroll/${payrollId}`,
providesTags: ["PayrollEntry"],
}),
PayrollEntries.tsx
const PayrollEntries: FC = () => {
const provisionedPayrollId: string = useAppSelector(
(state: any) => state.provisionedPayroll.id
);
const { data: dataPayrollPayrollEntries } =
useGetAllPayrollEntriesByPayrollIdQuery(provisionedPayrollId);
console.log(provisionedPayrollId);
// => "ed7c6cc9-8835-4974-ac0d-4cf54e917898"
console.log(dataPayrollPayrollEntries);
// => returns array of varying (0-all) results
// const { data: dataPayrollPayrollEntries } =
// useGetAllPayrollEntriesByPayrollIdQuery(
// "ed7c6cc9-8835-4974-ac0d-4cf54e917898"
// );
// => reliably returns all results
}
I intuit there's some sort of timeout issue between fetching from state and calling/completing the query, but I can't find a pattern to overcome this. I have also tried implementing useEffect()
to ensure the state's ID value was available, but to no success.
I've reviewed Constructing a Dynamic Base URL Using Redux State but am not certain if this is the right approach? Any support in clarifying my understanding is appreciated. Thanks in advance.
I resolved this by understanding that my frontend was racing ahead of the process completing server-side. Hence the partial return of date -- the server was returning only the data available at the time of the frontend request.
I resolved by passing a "complete" object to the frontend to enable action of the frontend router redirect.