Getting data undefined between validation/mutation

[fromagge]

Hey! I suppose this is an expected behavior from SWR but I'm getting undefined every-time a param or a mutation is applied before getting the correct value.

const useList = ({page,query}) => {
   const route = getRoute({
    route: '/api/users',
    query: {page, query},
  });

  return useSWR(
    route,
    async (url) => (await axios.get(url)).data
  );
}

const Component = () => {
  const [searchQuery, setSearchQuery] = useState(''); // This is inteded to be changed inside the rendered component
  const {data, mutate} = useList({page, query: searchQuery});

  if (!data) return <LoadingInline />;
  return (<OtherComponent data={data} />);
}

This works fine but, when the data goes undefined it causes a flicker between updates due to data being undefined. Reading your use cases and examples I assumed it would only get undefined at first render and then while he fetched new data he would use the previously fetched data. How can I archive this desired behavior or is it out of the scope with SWR?

[feledori]

I think you can set keepPreviousData in the config object of the useSWR hook.

[fromagge]

Thanks! Here's more info

[feledori]

Glad to help out!