React query not refetching data when id in querykey changes

Question

I have a zustand store that stores the selected application and when changes to the selected application are made it should refetch groups and actions that are connected to that application.

I also have a dynamic querykey array with the applicationname in there as a dependency, however in one of the tabs I already have to manually force a refetch through refetch when reactQuery would normally facilitate this on my own.

Maybe an oversight but never had this problem with react query before.

the applicationStore with zustand

import { create } from "zustand";

interface ManageState {
  selectedApplication: string | undefined;
  setSelectedApplication: (application: string) => void;
}

export const useManageStore = create<ManageState>((set) => ({
  selectedApplication: undefined,
  setSelectedApplication: (application: string) =>
    set({ selectedApplication: application }),
}));

The react querykey object

...


const manageKeys = {
  all: ["asf/manage"],
  item: (tab: string, application: string) => [
    ...manageKeys.all,
    tab,
    application,
  ],
  details: (tab: string, application: string, id: number | string) => [
    ...manageKeys.all,
    "detail",
    tab,
    application,
    id.toString(),
  ],
};



export const ASFqueryKeys = {
  ...,
  manage: manageKeys,
  ...
 }

The selectbox

export const ApplicationSelectBox = () => {
  const { setSelectedApplication, selectedApplication } = useManageStore();
  const { data: applications } = useGet<Application[]>(
    ASFqueryKeys.applications.all,
    getRoute(ApiRoutes.APPLICATIONS),
  );

  const handleSelectChange = (event: SelectChangeEvent) => {
    const selectedValue = event.target.value as string;
    setSelectedApplication(selectedValue);
  };

  return (
    <FormControl>
      <InputLabel>Application</InputLabel>
      <Select
        value={selectedApplication ?? ""}
        onChange={handleSelectChange}
        label="application"
        sx={{ width: "12em" }}>
        {applications?.map((app) => (
          <MenuItem value={app.name} key={app.name}>
            {app.name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
};

The action list that should refetch when the application changes

export function ManageByActionTab({ value, index }: ManageByActionTabProps) {
 
  ...

  const [selectedActionId, setSelectAction] = useState<number | undefined>(
    undefined,
  );

  const {
    data: actions,
    refetch: refetchActions,
    isLoading,
  } = useGet<ActionManageEntity[]>(
    ASFqueryKeys.manage.item("actions", selectedApplication ?? ""),
    fetchBase,
    false,
  );

  ...

  // CODE I HAVE TO MANUALLY FIRE FOR A REFETCH OTHERWISE IT DOESN'T REFETCH
  useEffect(() => {
    if (selectedApplication && selectedApplication !== "") {
      refetchActions();
      if (selectedActionId) {
        refetchActionDetails();
      }
    }
  }, [
    selectedApplication,
    fetchBase,
    refetchActionDetails,
    refetchActions,
    selectedActionId,
  ]);

  return (
    <Box hidden={value !== index} id={`simple-tabpanel-${index}`}>
      <Box sx={{ p: 3 }}>
        {!selectedApplication && (
          <Typography>Select an application first</Typography>
        )}
        {selectedApplication && (
          <Box display="flex">
            <Box>
              {isLoading && <LoadingList width="15vw" />}
              {actions && (
                <ActionList
                  selectAction={setSelectAction}
                  selectActionId={selectedActionId ?? 0}
                  actions={actions}
                />
              )}
            ...
        )}
      </Box>
    </Box>
  );
}

And all of it is in mui tabs (don't know if this code piece is relevant)

export const ManagePage = () => {
  ..

  const { selectedApplication } = useManageStore();

  const [tabIndex, setTabIndex] = useState(0);

  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
    setTabIndex(newValue);
  };
  return (
    <Box
      sx={{
        width: "70vw",
        marginLeft: matches ? "0vw" : "7vw",
        height: "75vh",
      }}>
      <Box display="flex" justifyContent="space-between">
        <Typography variant="h5" sx={{ marginTop: "0.5em" }}>
          {selectedApplication}
        </Typography>
        <ApplicationSelectBox />
      </Box>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs value={tabIndex} onChange={handleChange}>
          <Tab label="Manage by group" {...a11yProps(0)} />
          <Tab label="Manage by Action" {...a11yProps(1)} />
          <Tab label="Manage by User" {...a11yProps(2)} />
        </Tabs>
      </Box>
      <ManageByGroupTab value={tabIndex} index={0} />
      <ManageByActionTab value={tabIndex} index={1} />
      <ManageByUserTab value={tabIndex} index={2} />
    </Box>
  );
};

Answer 1

Updating from react-query to @Tanstack/react-query fixed it. basically I was 2 major versions behind.