I try to play with suspense and react-query@v5.

The fetch should be done in the client only because it access the local storage

async function getData() {
  const token = localStorage.getItem("token")
  await fetch('/xxxxxxxxx', { ... })
  return ...;
}

function useData() {
  return useSuspenseQuery({
    queryKey: ["data"],
    queryFn: () => getData();
  });
}

"use client";

function SuspenseWrapper() {
    return (<Suspense><SuspenseChildren /></Suspense>)
}

// other file with "use client";
function SuspenseChildren() {
  const { data } = useData();
  return <div> { ... } </div>
}

In the server, I have an error telling me local storage is not defined (I'm ok with that), but I don't understand why is my "use client" is executed server side, and how can I disable this?

thanks