In this tutorial, we will build a React.js application that interacts with a GraphQL endpoint. This method of project setup is modern and lightweight: it uses Hooks, ES Modules and has a small amount of dependencies. We will use Vite to create the project structure, pnpm to manage the dependencies, urql for GraphQL, and finally OneGraph as the GraphQL gateway to various APIs. Our goal is to create an application for listing GitHub repositories of a specific user.

Let’s start with pnpm, a package manager for JavaScript that is faster and more efficient than npm or yarn. pnpm uses a content-addressable filesystem to store your project dependencies. This way files inside node_modules are linked from a single place on your disk.

Vite is a build tool for web projects. It serves the code in development using ECMAScript Module imports. In production, vite bundles the code using Rollup. Vite is a lightweight solution that can be 100-150x times faster than alternatives such as Webpack or Parcel.

OneGraph provides a layer of unification for various GraphQL APIs. Using OneGraph, we can just access one endpoint and gain access to various GraphQL APIs at once. Think, a catalog of APIs. This simplifies and speeds up the development.

urql is a versatile GraphQL client for React.js, Preact and Svelte. The project is lightweight and highly customizable compared to alternatives such as Apollo or Relay. Its API is simple and the library aims to be easy to use.

We created a React.js application using Hooks. The project has a minimal set of dependencies. It uses the modern ECMASCript Modules approach. It is efficient in disk space as it uses pnpm as the package manager. The JavaScript/TypeScript transpilation is 100-150x faster than Webpack or Parcel. We use a simple and versatile GraphQL client called urql. Finally, we access the GitHub API via OneGraph, a meta API that provides an impressive catalog of GraphQL APIs with the unified access method. The end result is lightweight and modern.

Check the written tutorial:
https://zaiste.net/posts/modern-lightweight-reactjs-setup-graphql-vite-urql/

#react #graphql #javascript

#react.js #graphql #urql #vite