Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

243
Views
React/RTKQuery: Use lazy query is not forcing a refetch

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.

almost 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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.

almost 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!