Search code examples
reactjstypescriptreduxredux-toolkit

Redux Toolkit, component does not re-render after RTK query is fulfilled

I have a child component like so:

import { skipToken } from "@reduxjs/toolkit/dist/query";
import moment from "moment";
import {
  useFetchAccountQuery,
  useFetchTransactionsQuery,
} from "./accountApiSlice";

const TransactionsTable = () => {
  const { data: accountData } = useFetchAccountQuery();

  const changesSince: string = moment().subtract(7, "d").toISOString();

  let params = {
    accountId: accountData?.accountId,
    categoryId: accountData?.defaultCategoryId,
    changesSince,
  };

  const paramsAreGood: boolean = params.accountId && params.categoryId ? true : false;

  const { data: transactions, isSuccess: transactionsSuccess } = useFetchTransactionsQuery(paramsAreGood ? params : skipToken);

  return (
    <>
      {transactionsSuccess && (
        <div>
          <h1>Number of transactions: {transactions?.length}</h1>
        </div>
      )}
    </>
  );
};

export default TransactionsTable;

I am making two queries, then using the accountId and categoryId from the 1st query to pass to the 2nd query so that I can make the transactions query and get the data.

In Chrome's Network tab, I can see that my useFetchTransactionsQuery() fires and I get data back.

chrome network tab

However, my component remains blank and I do not get:

<h1>Number of transactions: <some number></h1>

Here is a screenshot from Redux Dev Tools too:

redux dev tools

What am I missing?

Solution

  • The culprit was this line:

    const changesSince: string = moment().subtract(7, "d").toISOString();

    I've no idea why, but I ditched moment for dayjs and it works now.