harsh-harlequin

<Link>, useNavigate makes that variable routes are not updated -> they need a reload

Hi, using a Link or useNavigate on product/1 for example, makes that sometime, it will render the product/2 because it was in cache, then if I reload the page, the good content is show. Can I do something about it ?

44 Replies

harsh-harlequinOP•2y ago

        <Link to={"/product/"+props.id} className="flex flex-row items-center w-full h-full justify-around">
            <img src={getAsset(props.imageSrc)} width={45} alt="card image" className="mt-2"/>

         
                <div className="w-7/12 font-londrina h-full flex flex-col justify-center gap-y-[7px]">
                    <p className="text-gold font-medium text-2xl">{props.name.toUpperCase()}</p>
                    <p className="text-lightgray text-justify text-xs font-roboto tracking-tighter">{props.description}</p>
                    <p className="font-bold text-white text-xl">{props.quantity}ML
                        - {props.dosage} - {props.nicotine}%</p>
                </div>
        </Link>

        <Link to={"/product/"+props.id} className="flex flex-row items-center w-full h-full justify-around">
            <img src={getAsset(props.imageSrc)} width={45} alt="card image" className="mt-2"/>

         
                <div className="w-7/12 font-londrina h-full flex flex-col justify-center gap-y-[7px]">
                    <p className="text-gold font-medium text-2xl">{props.name.toUpperCase()}</p>
                    <p className="text-lightgray text-justify text-xs font-roboto tracking-tighter">{props.description}</p>
                    <p className="font-bold text-white text-xl">{props.quantity}ML
                        - {props.dosage} - {props.nicotine}%</p>
                </div>
        </Link>

for example, if I click on this card showing product1 then product2, on product/2 it will show the content of product/1

eastern-cyan•2y ago

please provide a minimal complete example on e.g. Stackblitz

harsh-harlequinOP•2y ago

i'll be complex to reproduce the whole thing I think i'll try

eastern-cyan•2y ago

focus on it being minimal

harsh-harlequinOP•2y ago

It works with my backend and requests so idk if I really can but i'll try to screen record

harsh-harlequinOP•2y ago

harsh-harlequinOP•2y ago

@Manuel Schiller you can see the url at the top the 2nd product on which I clicked is 'product 2' then I refresh and it shows the correct data and this is my route:

export const Route = createFileRoute('/product/$productId')({
    component: () => ProductComponent(),
    validateSearch: searchObj => {
        return {
            productId: searchObj
        }
    },
});

function ProductComponent() {

    const {productId} = Route.useParams()

    const {data, error, isLoading} = useQuery(getProducutById(parseInt(productId)))

export const Route = createFileRoute('/product/$productId')({
    component: () => ProductComponent(),
    validateSearch: searchObj => {
        return {
            productId: searchObj
        }
    },
});

function ProductComponent() {

    const {productId} = Route.useParams()

    const {data, error, isLoading} = useQuery(getProducutById(parseInt(productId)))

eastern-cyan•2y ago

check with router dev tools how the router state looks like

harsh-harlequinOP•2y ago

okay, what should I see ?

eastern-cyan•2y ago

does params contain the correct value? if yes, this is likely a problem how you use react-query but really, you need to provide a complete example, otherwise it is just guessing

harsh-harlequinOP•2y ago

Can I send a github link?

eastern-cyan•2y ago

if you have a minimal example that exhibits this problem, sure

harsh-harlequinOP•2y ago

where it is located ? in context?

harsh-harlequinOP•2y ago

here I guess?

eastern-cyan•2y ago

on the right click on the match and then check the match details

harsh-harlequinOP•2y ago

I don't have iot wtf ok i have it now

harsh-harlequinOP•2y ago

I don't have it

eastern-cyan•2y ago

click on "product/1"

harsh-harlequinOP•2y ago

oh ok my bad sorry

harsh-harlequinOP•2y ago

okay so that

harsh-harlequinOP•2y ago

so the params seems ok but the data isnt

eastern-cyan•2y ago

then check the react-query devtools

harsh-harlequinOP•2y ago

I use tanstack query

eastern-cyan•2y ago

hm?

eastern-cyan•2y ago

https://tanstack.com/query/latest/docs/framework/react/devtools

Devtools | TanStack Query Docs

Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! ðŸ¥³ When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

harsh-harlequinOP•2y ago

npm i @tanstack/react-query-devtools yup

harsh-harlequinOP•2y ago

the id is never updated (in query) I think this implementation isn't good:

export function getProducutById(productId: number) {
    return queryOptions({
        queryKey: ['product_by_id'],
        queryFn: async () => {
            const {data} = await axios.get(import.meta.env.VITE_API_URL + 'products', {
                withCredentials: true,
                params: {
                    id: productId
                }
            })
            return data as Product
        }
    })
}

export function getProducutById(productId: number) {
    return queryOptions({
        queryKey: ['product_by_id'],
        queryFn: async () => {
            const {data} = await axios.get(import.meta.env.VITE_API_URL + 'products', {
                withCredentials: true,
                params: {
                    id: productId
                }
            })
            return data as Product
        }
    })
}

And I call it there:

function ProductComponent() {

    const {productId} = Route.useParams()

    const {data, error, isLoading} = useSuspenseQuery(getProducutById(parseInt(productId)))

function ProductComponent() {

    const {productId} = Route.useParams()

    const {data, error, isLoading} = useSuspenseQuery(getProducutById(parseInt(productId)))

eastern-cyan•2y ago

yes, the query key must contain the productId

harsh-harlequinOP•2y ago

queryKey: ['product_by_id', productId], just like that ?

eastern-cyan•2y ago

for example yes

harsh-harlequinOP•2y ago

yeah it works!

eastern-cyan•2y ago

as I suspected 😄

harsh-harlequinOP•2y ago

you'r great ! there is a channel to ask for react question in general?

eastern-cyan•2y ago

https://discord.com/channels/719702312431386674/1003327027849474198 and https://discord.com/channels/719702312431386674/1020327831592509480 oh no you meant react sorry

harsh-harlequinOP•2y ago

yeah react

eastern-cyan•2y ago

not on this discord server

harsh-harlequinOP•2y ago

okay 🙂

eastern-cyan•2y ago

maybe https://discord.com/channels/102860784329052160/103696749012467712

Gaming

Programming

<Link>, useNavigate makes that variable routes are not updated -> they need a reload

Did you find this page helpful?