eager-peach

How to retrieve "latest params" when loading a route?

Hello, I have a /meetings page that have multiple filters (search params) and the requirement is that every time user navigates to this page, these parameters are retrieved, and he sees what he saw before. What's the idiomatic way to do handle it with tanstack/router?

13 Replies

afraid-scarlet•8mo ago

I don't understand your requirement.

Route.useSearch()

Route.useSearch()

will return the latest params.

eager-peachOP•8mo ago

Let's say that user is: - navigating to /meetings - adding search=hello and sort=ASC, - navigaiting to /about - navigating again to /meetings (with click in the link, not with browser back navigation) - here he should see previous params: search=hello and sort=ASC

afraid-scarlet•8mo ago

Oh, good question. I tried to achieve your use-case: https://stackblitz.com/edit/tanstack-router-decyydrr?file=src%2Froutes%2Fabout.tsx but I did not manage to solve it. @Manuel Schiller Do you have some hints here?

Armin

StackBlitz

retain route params only (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

flat-fuchsia•8mo ago

i would write a custom search middleware that saves the value to localStorage and takes them from localStorage in case they are not set like this:

import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'

export const Route = createFileRoute('/meetings')({
  validateSearch: z.object({
    foo: z.string().optional(),
  }),
  search: {
    middlewares: [
      ({ search, next }) => {
        const result = next(search)
        if (result.foo) {
          localStorage.setItem('foo', result.foo)
          return result
        } else {
          const foo = localStorage.getItem('foo')
          if (foo) {
            return { ...result, foo }
          }
        }
        return result
      },
    ],
  },
  component: () => {
    const search = Route.useSearch()
    return (
        <div>{search.foo}</div>
    )
  },
})

import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'

export const Route = createFileRoute('/meetings')({
  validateSearch: z.object({
    foo: z.string().optional(),
  }),
  search: {
    middlewares: [
      ({ search, next }) => {
        const result = next(search)
        if (result.foo) {
          localStorage.setItem('foo', result.foo)
          return result
        } else {
          const foo = localStorage.getItem('foo')
          if (foo) {
            return { ...result, foo }
          }
        }
        return result
      },
    ],
  },
  component: () => {
    const search = Route.useSearch()
    return (
        <div>{search.foo}</div>
    )
  },
})

eager-peachOP•8mo ago

okay, I tried to implement it with your approach @Manuel Schiller, but have some problems with detecting when all filters were removed. Here is a bit more complex implemetation, because I found that there is a lot of things we need to think of https://stackblitz.com/edit/tanstack-router-qdncodhv?file=src%2Froutes%2Fdashboard.users.tsx Maybe you could take a look at this code, and tell me if it is possible to achieve what I want to achieve 😄 Thanks in advance!

Piotr Rudzki

StackBlitz

Router Kitchen Sink React Query File Based Example (forked) - Stack...

Run official live example code for Router Kitchen Sink React Query File Based, created by Tanstack on StackBlitz

flat-fuchsia•8mo ago

hm yes this more complicated than I initially thought you need additional information in the search middleware probably: - from - are we navigating or just building a link here?

eager-peachOP•7mo ago

yes, that would be definitely helpful Hi, is it possible that in the future you'll enrich the middleware API with necessary values? @Manuel Schiller

flat-fuchsia•7mo ago

not sure really maybe search middlewares are the wrong approach here this almost works: https://stackblitz.com/edit/tanstack-router-sqrxerz8?file=src%2Froutes%2Fdashboard.users.tsx but it does not recognize when you want to remove a filter however I don't see how you would ever detect wheter a param is just not present or has been removed

like-gold•7mo ago

Maybe with the onLeave route callback, you can save the search , and then restore it with the onEnter?

flat-fuchsia•7mo ago

what if you never leave? but close the browser?

like-gold•7mo ago

also save the search when the 'visibilitychange' event triggers?

flat-fuchsia•7mo ago

yes could be possible maybe also beforeunload? if there was a "clear filter" button in the actual ui, you should leverage this

like-gold•7mo ago

yeah, beforeunload is more appropriate but less reliable (not always fired). visibilitychange is the last guaranteed event to fire, but it also fires if you just switch tabs and come back

Gaming

Programming

How to retrieve "latest params" when loading a route?

Did you find this page helpful?