Cannot use two useSWR hooks in the same component!?

[tamis-laan]

I configures SWR as followed:

import { ReactNode } from "react";
import { SWRConfig } from "swr";
import fetcher from "../services/fetcher";

export default function SWRProvider({ children }: { children: ReactNode }) {
	return (
		<SWRConfig value={{ 
			fetcher: (url, options) => fetcher(url, options),
			refreshInterval: 0,
			dedupingInterval: 0,
			revalidateOnFocus: false,
			revalidateOnReconnect: false,
			onSuccess: (data) => console.log("SUCESS:", data),
			onError: (err) => console.error("ERROR:", err.message || err),
		}}> {children} </SWRConfig>
	);
}

I have the following two hooks:

import useSWR, { mutate } from "swr"
import { Record, RecordWorkflows } from "../../types/records"
import fetcher from "../../services/fetcher"

export function useRecordEventContent(id: string) {
	return useSWR<Record>(`/api/v1/record/${id}`);
}

export function useRecordWorkflows(id: string) {
	return useSWR<RecordWorkflows>(`/api/v1/record/${id}/workflows`);
}

Next I want to use both hooks in the same component:

import { useParams } from "react-router-dom"
import { useRecordEventContent, useRecordWorkflows} from "../services/APIv1/records"

export function RecordDetail() {
	const { id } = useParams()

	const { data: rec, error: rec_err } = useRecordEventContent(id)
	const { data: rw, error: rw_err } = useRecordWorkflows(id)

	if (rec_err) return <p>Error loading record: {rec_err.message}</p>
	if (rw_err)  return <p>Error loading workflows: {rw_err.message}</p>
	if (!rec || !rw) return <p>Loading...</p>

	console.log("rec", rec)
	console.log("rw", rw)
	return <div>worked</div>
}

However I get stuck in the Loading... screen and I see the following in the console:

Success: Object { .... }

And in the network tab I can see only the /api/v1/record/${id}/workflows is successfully called.

If I change the order of useRecordEventContent and useRecordWorkflows in the component then only the /api/v1/record/${id} route is called.

Note that this happens when refreshing the page or when the app is first loaded with the component. If I start my app and navigate to a page with the component. Then It does work and I see Worked.

Using the following version of swr:

    "node_modules/swr": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.2.tgz",
      "integrity": "sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA==",
      "license": "MIT",
      "dependencies": {
        "dequal": "^2.0.3",
        "use-sync-external-store": "^1.4.0"
      },
      "peerDependencies": {
        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },