Search code examples
javascriptreactjsreduxredux-toolkitrtk-query

RTK Query returns partial data when receiving URL param from Redux state


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.


Solution

  • 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.