How to use the useSWR twice on the same route?

[LALauw]

Hello!

I was introduced to useSWR yesterday and have been trying to replace my useEffect fetch hell with the use of useSWR hooks.

So for a simple example I have a /exchange route. Where I fetch user owned items and I fetch how many coupons they have left. So it requires 2 API calls. I separated the function hooks in separate files.

For example the coupon hook is as follows:

import useSWR from "swr";

const fetchCoupons = async (address: string) => {
  const res = await fetch(`/api/coupon/getCoupons?address=${address}`);
  return res.json();
};

export function useUserCoupons(address: string) {
  const { data, error } = useSWR(address ? address : null, fetchCoupons);

  return {
    isLoading: !error && !data,
    coupons: data,
    isError: error,
  };
}

For example the items hook is as follows:

import IERC721MetadataModel from "@/models/IERC721MetadataModel";
import useSWR from "swr";

const fetchLayers = async (address: string) => {
  const res = await fetch(`/api/alchemy/getUserLayerNFTs?address=${address}`);
  return res.json();
};


export function useUserLayerNFTs(address: string) {
  const { data, error } = useSWR<IERC721MetadataModel[]>(
    address ? address : null,
    fetchLayers
  );

  return {
    isLoading: !error && !data,
    tokenIds: data ? data.map((nft: any) => parseInt(nft.tokenId)) : [],
    isError: error,
  };
}

In separate components, but on the same route I have it as the following:

  const { coupons } = useUserCoupons(user);

const { tokenIds, isError, isLoading } = useUserLayerNFTs(user);

The problem occurs when I have another component on the same /exchange route that fetches a different endpoint. It conflicts with the other data.

Sometimes I receive the owned items (tokenids) and sometimes I receive coupons. Is it even possible to have 2 useSWR's in the same route that fetch data from different endpoints?

[LALauw]

I can however combine the 2 api calls in one fetcher and have only one useSWR.

import useSWR from "swr";

const fetchUserData = async (address: string) => {
  const res = await fetch(`/api/alchemy/getUserLayerNFTs?address=${address}`);
  const resCoup = await fetch(`/api/coupon/getCoupons?address=${address}`);
  return {
    layers: await res.json(),
    coupons: await resCoup.json(),
  };
};
export function useUserData(address: string) {
  const { data, error } = useSWR(address ? address : null, fetchUserData);

  return {
    isLoading: !error && !data,
    tokenIds: data?.layers
      ? data.layers.map((nft: any) => parseInt(nft.tokenId))
      : [],
    coupons: data?.coupons,
    isError: error,
  };
}