Skip to content

Instantly share code, notes, and snippets.

Last active May 23, 2022 20:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
data fetching example - Remix
// import loader hook
import { useLoaderData, Link } from "@remix-run/react";
export let loader = async () => {
const result = await fetch("");
const posts = await result.json();
return posts;
export default function PostsIndex() {
let data = useLoaderData(); // access the data here
return (
<div className="relative items-center w-full px-5 py-12 mx-auto md:px-12 lg:px-24 max-w-7xl">
<div className="grid w-full grid-cols-1 gap-12 mx-auto lg:grid-cols-3">
{ (item, index) {
return (
<div key={index} className="p-6 bg-indigo-500">
<div className=" mb-5 text-white ">
<h3 className="text-xl mb-3 font-bold">
<Link to={item.slug}>{item.title.rendered}</Link>
__html: data[0].excerpt.rendered,
<br />
className="bg-gray-900 text-white p-4 my-5"
Read more
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment