Question: React Native fetch and HTTP caching

[afreix]

Hello all,

I have a component that fetches some orders from an API, and refetches them whenever a user returns to a page (users can also pull to refresh). If a new order is added and a user returns to the <OrderList /> page, then I'd expect the new order to appear after the GET call is made.

const fetcher = url => fetch(url).then(r => r.json())

function OrderList({ isFocused }: Props) {
    const asyncOrders = useSWR("https://api.bigcommerce.com/stores/##storeId##/v2/orders?customer_id=190", fetcher);
    useEffect(() => {
        if (isFocused) {
            asyncOrders.revalidate();
        }
    }, [isFocused]);

    return (
            <AsyncResultLoader
                asyncData={asyncOrders}
                renderData={({ payload: orders }) => (
                    <FlatList
                        data={orders}
                        renderItem={({ item: order }) => (
                            <OrderItem key={order.id} {...order} />
                        )}
                        onRefresh={() => {
                            asyncOrders.revalidate();
                        }}
                        refreshing={asyncOrders.isValidating}
                        keyExtractor={(order) => order.id.toString()}
                    />
                )}
            />
    );
}

The problem is that React Native's fetch is automatically adding the if-modified-since header whenever users return to the page, so the response returned from our fetcher contains only the newly added order. I'm surprised that fetch automatically adds the if-modified-since header by default, and I'm wondering how this situation would normally be handled with useSWR. Is this a problem people often run into?

I think that useSWR is completely removed from the HTTP cache and maintains its own cache. I think the ideal behavior would be that the if-modified-since header is added, the GET call returns only the newly added order, and then somehow that new order is merged with the previously fetched orders, so that <OrderList /> displays all orders.

I found a workaround by setting cache-control: 'no-store' on the fetcher, but then we lose all benefits of HTTP caching and useSWR's cache. How should I go about handling this?

[ChrisHilborne]

You can set the headers for the fetch method as explained here: https://javascript.info/fetch-api

[pke]

I would say the stores API is treating the if-modified-since header in an unexpected way. It thinks its smart to only return the new orders since the last request should be returned, when in fact it should return all orders if there are new ones.

So I'd say RN is behaving correctly and the shops API is not.