React/RTKQuery: Use lazy query is not forcing a refetch-CodePudding

After hours and Hours of research and trying a bunch of stuff like lazy query subscription, I can't figure out why lazyQuery is not re-fetching as I expect

import * as React from 'react';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Logout from '@mui/icons-material/Logout';
import { useNavigate } from 'react-router-dom';
import LocalPostOfficeIcon from '@mui/icons-material/LocalPostOffice';
import './ProfileButton.css';
import {useSelector, useDispatch} from 'react-redux';
import {updateUserIDParam, updatePageParam} from '../../../features/Params';
import {useLazyGetPostsQuery} from '../../../services/PostsApi';

export default function ProfileButton() {
  const dispatch = useDispatch();

  const UserIDParam = useSelector((state) => state.Params.value.userId);
  const page = useSelector((state) => state.Params.value.page);
  const sort = useSelector((state) => state.Params.value.sort);

  const [triggerGetPostsQuery] = useLazyGetPostsQuery(); // Tried to pass arguments here 
  as well

  const userID = localStorage.getItem('userID');
  const userName = localStorage.getItem('userName');

  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const myPostsButtonOnClick = () => {
    dispatch(updateUserIDParam(`id=${userID}`));
    localStorage.setItem("OldPageValue", page);
    dispatch(updatePageParam(1))
    triggerGetPostsQuery({page, sort, UserIDParam}, {preferCacheValue: false}) // Want 
    re-fetch here
  }
   const showAllPostsButtonOnClick = () => {
    dispatch(updateUserIDParam(""))
    dispatch(updatePageParam(Number(localStorage.getItem("OldPageValue"))))
    triggerGetPostsQuery({page, sort, UserIDParam}, {preferCacheValue: false}) // Want 
    re-fetch here
    localStorage.removeItem("OldPageValue")
  }

I cannot use tags or other options here as this component is not a child component of my HomePage or something. I have tried to use lazyQuery without any arguments as well. But it's always using my cached value. I don't wanna remove caching completely as well. Only want these button clicks to force a refetching.

CodePudding user response：

preferCacheValue is acutally the second argument, not an option on it.

So you would have to call

triggerGetPostsQuery({page, sort, UserIDParam}, false)

Since {preferCacheValue: false} is a truthy value in JavaScript, you are essentially calling it with

triggerGetPostsQuery({page, sort, UserIDParam}, somethingTruthy)

which does the opposite of what you want.