Mutate revalidate with query params

[emulienfou]

Hello there,
I currently have this kind of code:

const { data } = useSWR('/events')
const [queryParams, setQueryParams] = useState('')

useEffect(() => {
    const events = mutate(`/events?${queryParams}`)
}, [queryParams])

I would like to know how to revalidate my call using mutate but with some query parameters to filters my events ?
However, when I wrote this code mutate do nothing because the cache key seems to not exists.

I also tried to write this code, without success: mutate(`/events`, queryParams)

queryParams has values like: country[]=CA and when to invalidate url like: /event?country[]=CA by example

[sergiodxa]

What you should do is to pass the query to useSWR like this:

const [queryParams, setQueryParams] = useState("");
const { data } = useSWR(`/events?${queryParams`);

This way, every time queryParams change you will trigger a new render, and you don't need to call mutate.

[gustavocd]

Bu this is going to trigger multiple http calls, so it should be debounced I guess.

[ConsoleTVs]

If you change a query parameter, that means most likely your data will change as well. That's why the parameter is there most of the time. Those to me, indicates it needs a specific key for it and should not be the same key as another. eg.

/users?active=1

/users?active=0

They will return very different results, if you debounce that or you cache one for the other you'll most likely not get the results you expected.

[iamyoki]

But this is going to make data to be null until fetched. Assuming this is a pagination, when click next page, the whole page will just fold because of null data.

[kasvith]

How we can handle multiple query parameters? for example with optional ones?

[MezianeKhalil]

in my case i do it like this way:

const FilterForm = () => {
  const handelSubmit = (values) => {
    // get mutate from custom hook  of fetching data
    const { mutate } = useReports()
    // then send get request with query params
    const reports= await axios.get(`localehost:3000/reports?${new URLSearchParams(values)`);
   // then mutate return data
    mutate([...reports ])
  }
  return (
   <form>.......</form>
)
}

[ntudor11]

In my case I use @sergiodxa 's approach for the hook, together with the rendering the component based on conditions as in the snippet below.

However, the re-rendering makes the component flickering with the loading... text, as isLoading becomes true while adding new query parameters. I added the isValidating condition to render something else, and that takes precedence, causing the flickering again, this time with the new text.

How can I avoid that and render the rest of the page, while modifying the query parameters? I need to mention that some other functions I declare require the data object, hence I need to check for its existence before I can proceed. Thanks in advance for the help!

export const Users = () => {
  const [queryParams, setQueryParams] = useState<QueryParamsProps>();

const { data, error, mutate, isValidating, isLoading } = useSWR(`/api/users?${new URLSearchParams(queryParams as Record<string, any>)}`), fetcher);

if (isValidating) {
    return <Typography variant="h3">loading...</Typography>;
  }

  if (isLoading) {
    return <Typography variant="h3">loading...</Typography>;
  }

  if (error || !data) {
    return <Typography variant="h3">Could not fetch data</Typography>;
  }

  return (
    <>
      {data}
      ...
    </>
  )