I’m new to react query I’m getting user data after Login and store it in a localstorage hook, after I navigate to Page.tsx I get the data but when I use invalidateQuery somewhere else it doesn’t work and the data still not updated
useGetParcels.tsx
import { getBikerParcels } from "@/models/bikerModels";
import { getSenderParcels } from "@/models/senderModels";
import { User } from "@/types/dataTypes";
import { useQuery } from "@tanstack/react-query";
const useGetParcels = (userData: User) => {
return useQuery(
["user-parcels", userData?.id],
async () => {
let res;
if (userData.type === "biker") {
res = await getBikerParcels(userData?.id);
} else if (userData?.type === "sender") {
res = await getSenderParcels(userData?.id);
}
const parcels = res.data.parcels;
return parcels;
},
{
staleTime: 1000 * 60 * 100,
enabled: userData?.id?.length > 0,
}
);
};
export default useGetParcels;
Page.tsx
"use client";
import React from "react";
import SenderTable from "./senderTable";
import useLocalStorage from "@/hooks/useLocalStorage";
import BikerTable from "./bikerTable";
import useGetParcels from "@/hooks/queries/useGetParcels";
import Loading from "@/components/Loading";
import Nav from "@/components/Nav";
export default function Dashboard() {
const [userData] = useLocalStorage("userData", null);
const { data: parcels, isLoading, error } = useGetParcels(userData);
if (isLoading) {
return <Loading />;
}
return (
<>
{userData?.type === "sender" && <Nav />}
{userData?.type === "sender" ? (
<SenderTable parcels={parcels} />
) : (
<BikerTable parcels={parcels} />
)}
</>
);
}
tried removing the optional chaining and it worked but I get TypeError: Cannot read properties of null (reading 'id')
Error