Typed GraphQL with react-query & graphql-request

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Scout APM - Less time debugging, more time building
  • OPS - Build and Run Open Source Unikernels
  • SonarQube - Static code analysis for 29 languages.
  • GitHub repo SWR

    React Hooks for Data Fetching

    I have considered swr instead of react-query, as it's smaller, but they lack some fundamentals that we need. Think clear state indicators or even a (solid) solution to manage mutations.

  • GitHub repo graphql-typed-document-node

    An improved version of `DocumentNode` for seamless TypeScript integration for GraphQL.

    GraphQL Code Generator can generate fully typed React hooks if you tell it to, but I'm a fan of keeping things simple and thereby of their TypedDocumentNode approach. This variant is unaware of the GraphQL client that you're using. In other words, it's not tied to react-apollo (or alternative).

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo graphql-request

    Minimal GraphQL client supporting Node and browsers for scripts or simple apps

    For the fetching part, we'll use graphql-request. It has almost as many installs/month as apollo, but it's way smaller and doesn't have as many open issues.

  • GitHub repo react-query

    ⚛️ Hooks for fetching, caching and updating asynchronous data in React

    I'm not going with the famous @apollo/client because it's too much for our dashboard. Besides, we're migrating from REST to GraphQL, meaning we'll need to deal with both for some time. As React Query is sublime in cache management, and can be used for both REST and GraphQL, we'll be using that.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts