Why when RTK is mid query, on refresh, isFetching stays true and will not update, despite doing refetch or already having data?

[drewgallagher]

I have a strange issue where RTK is getting stuck in the isFetching state on refresh only.

If I clear sessionStorage and load the page it runs the queries and it loads the data.

On tab change it even refetches the data successfully.

However if the data is still fetching and I refresh, when the page loads the isFetching is still stuck in the same state and will not change.

I'm not sure what the cause is, maybe something with redux persist or caching?

Here is a video recording of the issue:

https://www.loom.com/share/8a3b83d4442d4cbf9b0e6dc393e6638d

Here is the code for that component where the queries are happening:

import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import { useDispatch } from 'react-redux';
import { Link, useHistory, useLocation, useParams } from 'react-router-dom';
import { DesktopOutlined, GoogleOutlined, FilePptOutlined, DownOutlined } from '@ant-design/icons';
import { Action, Role } from 'api/accessControl';
import { useGetStrategyQuery } from 'api/crudGraphQL/strategies/getStrategy';
import { config } from 'config';
import { useStrategyServiceSummary } from 'utils';
import {
  fetchStrategyById,
  Resource,
  createKickoffDeck,
} from 'features/entitiesRedux';
import { monthlyDeliverableStrategyProjection } from 'features/entitiesRedux/models/strategy/projections';
import {
  AccessControl,
  Button,
  Dropdown,
  Menu,
  notification,
  PageHeader,
  Skeleton,
  TabPane
} from 'components';
import { useAccount } from '../../global';
import { SalesforceSyncAlert, SalesforceSyncModal } from '../components/StrategyForm/components';
import { strategyProjection } from '../strategyProjection';
import {
  Approvals,
  BlueprintOverviewCSVButton,
  DealInfo,
  EditDealInfo,
  HourlyBreakdown,
  MonthlyBreakdown,
  OutsourceCosts,
  GenerateDocument,
  SalesforceContextMenu,
  SuggestedOpportunitiesAlert,
  Tabs,
  TeamCommissions,
  UpdateStatusSelect,
} from './components';
import css from './ViewStrategyPage.module.scss';

/**
 * Strategies -> View strategy
 */
const ViewStrategyPage = () => {

  const dispatch = useDispatch();

  const { id: idRaw = '' } = useParams<{ [x: string]: any }>();
  const id = Number.parseInt(idRaw);
  const defaultPollingInterval = 0;
  const [pollingInterval, setPollingInterval] = useState<number>(defaultPollingInterval);
  const [deliverableUpdatedAt, setDeliverableUpdatedAt] = useState<Date>();

  const history = useHistory();
  const { account } = useAccount();

  const hash = history.location.hash.replace('#', '');

  /**
   * RTK fetch strategy data
   */
  const { data: strategy, isFetching, refetch } = useGetStrategyQuery({
    id,
    projection: { ...strategyProjection, ...monthlyDeliverableStrategyProjection }
  }, { pollingInterval: defaultPollingInterval });

  const { strategyServiceSummary, fetching: isFetchingStrategyServiceSummary, refetch: refetchStrategyServiceSummary} = useStrategyServiceSummary('Default Values', strategy?.id);
  const { strategyServiceSummaryRounded, fetching: isFetchingStrategyServiceSummaryRounded, refetch: refetchStrategyServiceSummaryRounded } = useStrategyServiceSummary('Rounded Values', strategy?.id);

  console.log('fetching strategy', isFetching);
  console.log('fetching service summary', isFetchingStrategyServiceSummary);
  console.log('fetching rounded', isFetchingStrategyServiceSummaryRounded);
  console.log(strategy);
  console.log(strategyServiceSummaryRounded);


  const location = useLocation<{ from: string }>();
  const redirect = `${config?.host}${location.pathname}` || '/';
  const [currentTab, setCurrentTab] = useState<string>('deal-info');

  const [openSyncModal, setOpenSyncModal] = useState<boolean>(false);

  const [disableDeckGen, setDisableDeckGen] = useState<boolean>(false);

  const isFinanceReviewed = (account?.roles &&
    (account.roles.includes(Role.accounting) || account.roles.includes(Role.cLevel)||
    account.roles.includes(Role.vpLevel)) &&
    account.roles.includes(Role.blueprintsReview));

  const isSuperAdminBP = (account?.roles &&
    account.roles.includes(Role.superAdmin));

  const isDepartmentReviewed = (account?.roles && !isFinanceReviewed && !isSuperAdminBP &&
  (account.roles.includes(Role.departmentDirectors)
      || account.roles.includes(Role.blueprintsReview)));

  const refetchAll = () => {
    refetch();
    refetchStrategyServiceSummary();
    refetchStrategyServiceSummaryRounded();
  };

  // if Blueprint status is set to 'won', then only allow certain user roles to edit finance-related fields
  const isLocked = strategy?.status === 'won' &&
    ![Role.superAdmin, Role.cLevel, Role.vpLevel, Role.accounting, Role.blueprintsReview].some(el => {
      return (account?.roles?.length && account?.roles?.indexOf(el) > -1);
    });

  useEffect(() => {
    /**
     * Refetch once on page load to handle
     * users updating an input and immediately
     * reloading the page (this happens surprisingly often)
     */
    refetchAll();
  }, []);

  useEffect(() => {
    if (pollingInterval !== 0) {
      if (
        strategy?.deliverable?.updated_at
        && deliverableUpdatedAt !== strategy.deliverable.updated_at
        && strategy?.deliverable?.status === 'completed'
      ) {
        setPollingInterval(0);
      }
    }
  }, [pollingInterval, strategy?.deliverable?.updated_at]);

  useEffect(() => {
    if (strategy?.deliverable?.updated_at) {
      setDeliverableUpdatedAt(strategy.deliverable.updated_at);
    }
  }, [strategy]);


  const handleTabChange = (key: string) => {
    history.replace(`#${key}`, {from: 'internal'});
    refetchAll();
  };

  /**
   * If it is not the users first time on the application, set back button to
   * go back 1 entry in the history stack
   * location.state is undefined if user did not navigate from inside of nova
   * (Ex. using an external link)
   */
  const handleBackButton = (): void => {
    if (location?.state?.from === 'internal') {
      history.go(-1);
    } else {
      history.push('/blueprints');
    }
  };

  useEffect(() => {
    hash ? setCurrentTab(hash) : setCurrentTab('deal-info');
  }, [hash]);

  useEffect(() => {
    if(hash === 'approvals' && strategy?.status !== 'won' ) {
      history.replace(`${strategy?.id}`);
      setCurrentTab('deal-info');}
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [strategy?.id]);

  if ((isFetching && !strategy) || !strategy) {
    return <Skeleton />;
  }

  /** This is used to control access of the Team Commissions and Approvals tab */
  const hasTabAccess = () => {
    // check if current user is the Account Director aka executive sponsor
    const isExecutiveSponsor = account?.id === strategy?.executive_sponsor?.id;
    const isAuthor = account?.id === strategy?.author?.id;

    // user roles allowed to view Team Commissions
    const permittedRoles = [
      Role.superAdmin,
      Role.accounting,
      Role.departmentDirectors,
      Role.blueprintsReview,
      Role.vpLevel,
      Role.cLevel,
      Role.accountManagers
    ];
    return (permittedRoles.some(el => {
      return (account?.roles?.length && account?.roles?.indexOf(el) > -1);
    }) || isExecutiveSponsor || isAuthor);
  };

  const generateKickoffDeck = async () => {
    setDisableDeckGen(true);
    try {
      const createKickoffAction: any = await dispatch(createKickoffDeck({ strategy_id: id }));
      if (createKickoffDeck.fulfilled.match(createKickoffAction)) {
        notification.success({ message: 'Created Kickoff Deck' });
        dispatch(fetchStrategyById({ id }));
      }
      if (createKickoffDeck.rejected.match(createKickoffAction)) {
        const needsReauth = createKickoffAction?.error?.message?.includes('Google Account is missing');
        console.log('Error creating kickoff deck');
        notification.error({
          message: `An error occurred while creating Kickoff Deck${needsReauth ? '. Please reauthenticate your Google account.' : ''}`
        });
      }
    } catch (error) {
      console.error('Error creating kickoff deck', error);
    }
    setDisableDeckGen(false);
  };

  /**
   * Get's link to parent blueprint
   * that this blueprint was duplicated from
   *
   * @returns blueprint html link
   */
  const getDuplicatedBlueprintLink = () => {
    return  strategy?.parent?.id ?
      <div>
        Created from blueprint{' '}
        <Link to={`/blueprints/${strategy?.parent?.id}`}>{strategy?.name}</Link>
      </div> : <></>;
  };

  const kickoffDeckDisabled = !account?.accounts?.filter((account: { type: string; }) => account?.type === 'google')?.length;
  return (
    <div className={css.root}>
      {/* <NovaSalesforceDisconnectAlert connected={salesforceConnected} /> */}
      <Helmet>
        <title>{strategy?.client?.name ? `${strategy?.client?.name} Blueprint` : 'Blueprint'}</title>
      </Helmet>
      <PageHeader
        title={strategy?.client?.name}
        subTitle={strategy?.name}
        onBack={handleBackButton}
        extra={[
          <AccessControl
            key="strategy-proposal"
            action={[Action.update]}
            resource={Resource.strategy}
            showWarning={false}
          >
            <>
              <UpdateStatusSelect strategy={strategy} />
              <GenerateDocument
                strategy={strategy}
                account={account}
                currentTab={currentTab}
                setPollingInterval={setPollingInterval}
              />
              <Dropdown overlay={
                <Menu>
                  <Menu.Item key='kickoff-1' disabled={!strategy?.presentation?.deck_url}>
                    {
                      strategy?.presentation?.deck_url ?
                        <Button type='text' header icon={<DesktopOutlined />} disabled={kickoffDeckDisabled}>
                          <a href={strategy?.presentation?.deck_url} target='_blank' rel='noopener noreferrer'>
                            View Kickoff Deck
                          </a>
                        </Button> :
                        <Button onClick={generateKickoffDeck} disabled={disableDeckGen || kickoffDeckDisabled} type='text' header icon={<FilePptOutlined />}>
                          Generate Kickoff Deck
                        </Button>
                    }
                  </Menu.Item>
                  <Menu.Item key='kickoff-2'>
                    <Button type='text' header icon={<GoogleOutlined />}>
                      <a
                        href={`/services/google?redirect=${redirect}`}
                        rel='noopener noreferrer'
                      >
                        Reauthorize Google Account
                      </a>
                    </Button>
                  </Menu.Item>
                </Menu>
              }>
                <Button type='text' header>
                  Kickoff Deck &nbsp;<DownOutlined style={{ fontSize: '12px' }} />
                </Button>
              </Dropdown>

              {strategy?.salesforce_opportunity_id ?
                <AccessControl
                  action={Action.update}
                  resource={Resource.strategy}
                  showWarning={false}
                >
                  <SalesforceContextMenu
                    strategy={strategy}
                    refetch={refetch}
                    setOpenSyncModal={setOpenSyncModal}
                  />
                </AccessControl>
                : <></>
              }
            </>
          </AccessControl>,
        ]}
      />
      {/* {Disabled until we figure out the use case} */}
      {/* {strategy?.client?.salesforce_client_id && !strategy?.salesforce_opportunity_id ?
        <SuggestedOpportunitiesAlert
          strategyId={strategy?.id}
          client={strategy?.client}
        />
        : <></>
      } */}

      <Tabs
        loading={isFetching}
        onTabChange={handleTabChange}
        currentTab={currentTab}
        grade={strategy?.grade}
        animated={false}
        activeKey={currentTab}
        extra={currentTab === 'deal-info' ? <BlueprintOverviewCSVButton strategy={strategy} loading={isFetching} /> : <></>}
      >
        <TabPane key="deal-info" tab="Blueprint Overview">
          {isFetching || isFetchingStrategyServiceSummary || isFetchingStrategyServiceSummaryRounded ? <Skeleton active/> : (
            <DealInfo
              reviewerType={isFinanceReviewed || isSuperAdminBP ? 'Finance' : 'Department'}
              strategyServiceSummary={strategyServiceSummary}
              strategyServiceSummaryRounded={strategyServiceSummaryRounded}
              strategy={strategy}
              tabChange={hash}
              account={account}
            />)}
        </TabPane>
        <TabPane key="monthly-breakdown" tab="Monthly Retainer & Profit">
          <MonthlyBreakdown isLocked={isLocked} />
        </TabPane>
        <TabPane key="hourly-breakdown" tab="Services (Hours)">
          <HourlyBreakdown isLocked={isLocked} />
        </TabPane>
        <TabPane key="outsource-costs" tab="Outsource Costs">
          <OutsourceCosts isLocked={isLocked} />
        </TabPane>
        {hasTabAccess() ?
          <TabPane key="team-commissions" tab="Team Commissions">
            <TeamCommissions
              reviewerType={isDepartmentReviewed || isSuperAdminBP ? 'Department' : 'Finance'}
              account={account}
              strategy={strategy}
              isLoading={isFetching}
            />
          </TabPane>
          : <></>
        }
        {hasTabAccess()
          && (strategy?.status === 'won'
          // Will add back if deny reason is to be shown on approvals page
          // || (strategy.reviewer_status === 'denied'
          // || strategy.departments.find((department: { reviewer_status: string; }) => department.reviewer_status === 'denied'))
          )?
          <TabPane key="approvals" tab="Approvals">
            <Approvals strategy={strategy} />
          </TabPane>
          : <></>}
        <TabPane key="edit-deal-info" tab="Edit Blueprint">
          <EditDealInfo
            openSyncModal={openSyncModal}
            setOpenSyncModal={setOpenSyncModal}
          />
        </TabPane>
      </Tabs>
      {
        currentTab !== 'edit-deal-info' && strategy?.sync_to_salesforce && strategy?.salesforce_is_primary ?
          <div className={css.stickyFooter}>
            <div className={css.stickyFooter_children}>
              <SalesforceSyncAlert sync={strategy?.salesforce_is_primary && strategy?.sync_to_salesforce} setOpenSyncModal={setOpenSyncModal} />
            </div>
          </div> :
          <></>
      }

      <SalesforceSyncModal
        id={strategy?.id}
        loading={isFetching}
        open={openSyncModal}
        setOpenSyncModal={setOpenSyncModal}
        sync={strategy?.sync_to_salesforce}
        salesforceOpportunityId={strategy?.salesforce_opportunity_id}
        salesforceIsPrimary={strategy?.salesforce_is_primary}
        refetch={refetch}
      />

      {strategy?.audit?.id ?
        <div className={css.appraisalAlert}>
          <>
            Created from appraisal{' '}
            <Link to={`/appraisals/${strategy?.audit?.id}`}>{strategy?.audit?.name}</Link>
          </>
        </div> : <></>
      }
      {
        getDuplicatedBlueprintLink()
      }
    </div>
  );
};

const Title = () => {
  const { id } = useParams<{ [x: string]: any }>();
  const { data: strategy, isFetching } = useGetStrategyQuery({
    id: Number.parseInt(id),
    projection: strategyProjection
  });

  if (isFetching || !strategy) {
    return <Skeleton title={{ width: 200 }} paragraph={false} active />;
  }

  return <>{strategy?.name}</>;
};

Title.displayName = 'ViewStrategyPageTitle';
export default Object.assign(ViewStrategyPage, { Title });
Looking for assistance, thanks!

[drewgallagher]

Turned out that redux-persistance was caching the queries for rtk, causing the isFetching state to get stuck.

By removing the rtk redux-persistance in the store.ts it fixed the issue

[markerikson]

Yeah, issues like this are why we generally recommend not persisting an RTKQ API slice.

[phryneas]

And if you do, don't blindly persist it, but follow our documentation for that - you need to do extra setup:

https://redux-toolkit.js.org/rtk-query/usage/persistence-and-rehydration