Запрос React не извлекает данные при изменении идентификатора в ключе запроса

У меня есть хранилище zustand, в котором хранится выбранное приложение, и при внесении изменений в выбранное приложение оно должно повторно получать группы и действия, связанные с этим приложением.

У меня также есть динамический массив querykey с именем приложения в качестве зависимости, однако на одной из вкладок мне уже приходится вручную принудительно выполнять повторную выборку через повторную выборку, тогда как реакции Query обычно облегчают это самостоятельно.

Возможно, это недосмотр, но никогда раньше не было такой проблемы с ответным запросом.

Магазин приложений с помощью 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 }),
}));

Реагирующий объект querykey

...


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,
  ...
 }

Поле выбора

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>
  );
};

Список действий, который должен обновляться при изменении приложения.

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>
  );
}

И все это во вкладках mui (не знаю, актуален ли этот кусок кода)

export const ManagePage = () => {
  ..

  const { selectedApplication } = useManageStore();

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

  const handleChangeEvent = (_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 = {handleChangeEvent}>
          <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>
  );
};