Tutorials on Graphql

In this article, we will learn how to use the urql authExchange to add authentication with a GraphQL API in a Next.js app.

In this article, we will learn how to use urql to consume a GraphQL API in a Next.js SSR app.

Consider the following code snippet of a React component, , that... You may have noticed that the data sent back by the mutation provides the user's information in a logIn field, and any data returned from a successful mutation automatically gets added to the local Apollo Client cache.…

The Fullstack React with TypeScript Masterclass is now live! 🎉 This Masterclass teaches you practical React and TypeScript for developing apps from idea to completion, along with all the important tools in the React ecosystem. It expands on the material taught in our comprehensive book, Fullstack…

There are a bunch of GraphQL clients that exist. How do you know which one is right for you? I'm going to discuss some of your options, but let's cut to the chase: If you're building a front-end web-app, I recommend you use Apollo Client. If you want to take my recommendation, you can just skip…

RESTful APIs adhere to a reliable architectural standard for transferring data statelessly over the HTTP protocol. Every endpoint of an API semantically describes how a resource should be created (POST), read (GET), updated (PUT/PATCH), deleted (DELETE), etc. Large, data-driven applications consume…

In this post, I want to explain something that tripped me up for a long time: how to generate TypeScript types from a GraphQL server. They are! In fact, you even have types for your queries, which is extra confusing. Let me try to clarify. So, in your GraphQL server you might expose a User object.…

Apollo is a great interface for fetching and managing data through GraphQL. When we’re building applications with GraphQL, it’s important to manage data effectively to have a smooth development experience. This is where Apollo steps in, and acts as an abstraction layer over GraphQL (which is just a…

Using GraphQL together with TypeScript can have huge advantages, as you can use your GraphQL schema to create TypeScript type definitions and even code that fetches data from the GraphQL server. This is incredibly powerful. Why is that? Basically it means we can have TypeScript types that match our…

There are a bunch of GraphQL clients that exist. How do you know which one is right for you? I’m going to discuss some of your options, but let’s cut to the chase: If you’re building a front-end web-app, I recommend you use Apollo Client. If you want to take my recommendation, you can just skip…

Quiz time: I’ll name three companies and you tell me what they have in common between them: Github. PayPal. Major League Soccer. The answer? They all switched to GraphQL.

As I’ve mentioned before, GraphQL has become incredibly popular in the last few years. I consider GraphQL to be the most exciting thing to happen to APIs - there are a ton of benefits to GraphQL and, in fact, I’d go so far to say as that GraphQL is the new REST. It’s not just me, either: GraphQL…

GraphQL is described as a query language for APIs. It is also considered as an alternative to REST and has been adapted more frequently in the last few years. Do you have a GraphQL endpoint already setup but you are looking forward to gaining some insight on how to gracefully consume this endpoint…