Async Data fetching in Remix

Remix is another JavaScript framework for building beautiful web app. May be a better Nextjs killer framework.

So let's talk about the data fetching in Remix route.

In Remix we can fetch date from API with useLoaderData hook. First up all define and export a loader function in the route.

export const loader = async () => {
  const res = await client.fetch(
    `*[_type == "qset"]{_id,quizes[]->{_id,question,options,category->{name} }} | order(_createdAt desc)`
  );

  const data = await res;
  return data;
};

and in the component we can use the useLoaderData hook for accessing the data.

import { useLoaderData } from "@remix-run/react"
.....

export default function Index() {
  const data = useLoaderData();
  return (
    <div>
      <Status played={2} count={1} />
      <div className="grid grid-cols-2">
        <QContainer>
          {data?.map((set, index) => (
            <Card key={index} data={set?.quizes} />
          ))}
        </QContainer>
      </div>
    </div>
  );
}