Remix is better than GraphQL

For some scenarios, anyway

Remix is better than GraphQL.

I know that sounds weird, because they’re different things.

• Remix is a full-stack React framework for building apps.

• GraphQL is a query language for building APIs.

What I’m thinking about, though, is loading data.

In GraphQL, your UI components specify data queries that can be composed togther. You have type-safety, fetch only the data you need, and don’t have to drill props.

// src/components/MyComponent.graphql

{
  cats {
    id
    favoriteTreats
  }
}

In Remix, you return data to route segments from “loaders”, which are basically API endpoints specific to part of a page. You also have type-safety, only fetch the data you need, and don’t need to drill props too much.

// app/routes/some/route/segment.tsx

export function loader() {
  const cats = getCats();
  return json({cats});
}

They work very differently, but if you squint, they have similar benefits. Both have good and bad things.

• GraphQL is really general. Authorization, performance, and security can be hard. Obligatory link to Why, after 6 years, I’m over GraphQL.

• Remix loaders are very specific. They’re straightforward to authorize. You can, of course, still write poorly performing code. But because a loader is loading specific data (it isn’t general purpose), there’s less opportunity for someone to create bad or malicious input. It’s also much more like the recommendation from The dogma of restful apis.

Look, GraphQL is a great technology. I think it really makes sense for when you want separation between backand and frontend teams, and you have experts in GraphQL who can own setting it up and getting the details right.

Remix is also a great technology. It makes a lot of sense when you want full-stack teams and a simpler dev experience.