How to filter already fetched data and trigger re-rendering?

[dusanbrankov]

Hi there,

I''ve just started using SWR and I have a very basic question.

I want to filter data that has already been fetched. As far as I understand, I can do that with mutate(), but it requires an additional API request. But is it possible to extract some data using the native JS filter() method to update the UI without having to make an additional API request?

Here's an example of what I'm trying to accomplish:

const handleCategoryChange = (e) => {
  const selectedCategory = e.target.value;

  const filteredProducts = fetchedProducts.filter(product =>
    product.category === selectedCategory);

  // How tu use "filteredProducts" to update?
}

Sorry if this is a dump question, I'm still trying to figure out how to use SWR properly.

I would really appreciate any help. Thank you very much.

[koba04]

You can mutate data without revalidation with the { revalidate: false } option.

https://swr.vercel.app/docs/mutation#parameters

const { data, mutate } = useSWR(key, fetcher);

const handleCategoryChange = (e) => {
  const selectedCategory = e.target.value;

  const filteredProducts = fetchedProducts.filter(product =>
    product.category === selectedCategory);

  mutate(filteredProducts, { revalidate: false });
}

[dusanbrankov]

Hello @koba04

Thanks for your reply!

I've come up with a similar approach, namely passing false as the second argument to the mutate() function:

mutate(filteredProducts, false);

With this, the UI updates with the filtered data after the first change event, but after selecting any value a second time, I get nothing, just an empty page. Also, when I defocus and re-focus the browser window, all the original products show up again. I'm not sure why this is happening.

I just tried to do it as you suggested, but unfortunately I'm getting the same strange result.

Here's the code I have, maybe I'm missing something:

const fetcher = (...args) => fetch(...args).then(res => res.json());

export default function useFetcher(endpoint) {
  const { data, error, isLoading, mutate } = useSWR(API_BASE_URL + endpoint, fetcher);
  return { data, error, isLoading, mutate };
}

export default function ProductTable() {
  const { data: fetchedProducts, mutate } = useFetcher("products");
  const { data: fetchedCategories } = useFetcher("categories");

  const handleCategoryChange = (e) => {
    const selectedCategory = e.target.value;

    const filteredProducts = fetchedProducts.filter(product =>
      product.category === selectedCategory);

    mutate(filteredProducts, { revalidate: false });
  }

  // ...
}

The change event should occur when a product category is selected:

I initially did this using simple fetch() within useEffect and useState to set the data. It would be great if I could make this work with SWR. Seems like I'm close to making it work, I just don't know why this bug occurs and what I need to change.

[koba04]

If you filter fetched data based on a selected value, you can filter data on rendering.

const [selectedProduct, setSelectedProduct] = useState(initialValue);
const { data: fetchedProducts, mutate } = useSWR(key, fetcher);

const filteredProducts = fetchedProducts.filter(product =>
  product.category === selectedCategory);

const handleCategoryChange = (e) => {
  setSelectedProduct(e.target.value);
}