Top 5 tools every frontend developer should be using with GraphQL in 2023

Every week, a bunch of fresh tools, services, and libraries make their debut, claiming to take the GraphQL developer experience to the next level.

Here are my top 5 tools every frontend developer should be using with GraphQL in 2023:

1. Grafbase OpenAPI Connector

Maximize the power of web and mobile app development by effortlessly blending REST and GraphQL APIs with Grafbase. Say goodbye to complexity and hello to a unified GraphQL API that supercharges your app development process.

Enter OpenAPI, formerly known as Swagger - the ultimate game-changer for API definition and documentation. It simplifies things by describing APIs in a format that machines understand, making it easier for developers to work with all kinds of APIs. And with Grafbase Edge Gateway, you can seamlessly merge OpenAPI-driven REST APIs and transform them into GraphQL, taking your stack to a whole new level of awesomeness.

extend schema
  @openapi(
    name: "Stripe"
    schema: "https://raw.githubusercontent.com/stripe/openapi/master/openapi/spec3.json"
    headers: [
      { name: "Authorization", value: "Bearer {{ env.STRIPE_API_KEY }}" }
    ]
  ) {
  query: Query
}

It's free to get started and you don't even need an account to build locally:

npx grafbase init --template openapi-stripe

2. GraphQL Code Generator — Client Preset

The type system in GraphQL is a major game-changer. We can leverage the GraphQL Code Generator to use that same type system to generate TypeScript types so we can build better frontends without error.

In the past, we relied on the GraphQL Code Generator to generate hooks for our existing GraphQL clients. But it was a pain when we wanted to switch to new clients.

The GraphQL Code Generator recommends using the client-preset and TypedDocumentNode to level up our functions and make sure we're getting the correct operation and variable types.

Plus, it's all about keeping operations and fragments in their own components. This approach reduces code complexity, keeps things tidy, and makes it a breeze to switch to any GraphQL client that supports TypedDocumentNode.

export const LessonFragment = graphql(/* GraphQL */ `
  fragment LessonItem on Lesson {
    title
  }
`)

export function Lesson(props: { lesson: FragmentType<typeof LessonFragment> }) {
  const lesson = useFragment(LessonFragment, props.lesson)

  return (
    // Fully typed!
    <li>{lesson.title}</li>
  )
}

3. GQty

Are you tired of the hassle of writing GraphQL operations and configuring codegen for TypeScript? Say goodbye to all that and switch to GQty!

With GQty, you don't even need a separate GraphQL client. It's like magic! GQty takes care of transforming your code into a GraphQL operation behind the scenes. So sit back, relax, and let GQty handle all the heavy lifting for you.

import type { FunctionComponent } from 'react'
import { useQuery } from '../gqty/'

const Query: FunctionComponent = () => {
  const {
    me: { name, friends }
  } = useQuery()

  return (
    <>
      Hello {name}!
      <ol>
        {friends().map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ol>
    </>
  )
}

export default Query

4. GraphQL Network Inspector

The days of struggling to identify /graphql requests in the Network Inspector are over!

GraphQL Network Inspector, an awesome extension for developer tools that makes debugging a breeze.

It categorizes requests into queries, mutations, and subscriptions and even uses the GraphQL operation name. Say goodbye to confusion and hello to simplified debugging.

5. GraphMan

GraphMan takes away all the boring and time-consuming aspects of crafting queries and mutations for a GraphQL API.

With GraphMan, you can effortlessly generate a comprehensive collection from a single GraphQL endpoint. Each collection includes requests for every query and mutation, all conveniently pre-filled variables.

To create a collection, just pass your Grafbase API URL to the command below. It's that easy!

deno run https://deno.land/x/graphman@v1.2.1/src/cli.ts GRAFBASE_API_URL_HERE

 Join us at GraphQL Conf

Do you want to learn more about GraphQL? Join us at GraphQL Conf this year. Get your tickets now.

Comments

[Jamie Barton]

Are you using something else as a frontend developer? Share your recommendations here 😍