はてなブックマーク

Most articles explaining the benefits of GraphQL focus on advantages for the frontend: things like preventing overfetching, reducing round trips, and iterating faster. But GraphQL provides just as many advantages for backend developers, which is why I choose it by default for new APIs and why you should consider it, too. Improved communication The goal of building any API is to enable someone to u

Blog /announcement /Frontend /Using Apollo Client with Next.js 13: releasing an official library to support the App Router Back to Blog May 10, 2023Using Apollo Client with Next.js 13: releasing an official library to support the App Router The latest release of Next.js 13 (13.4) declared the new app directory as stable and it will now be the default for new projects. The app directory is a major

May 18, 2022The supergraph: a new way to think about GraphQL We’ve had a busy month at Apollo. Over the last several weeks we’ve released some significant updates to the Apollo stack. Last month we shipped Federation 2, a sophisticated and more flexible approach to GraphQL composition. And last week we made Contracts generally available, a way to tailor your graph to specific use cases like mobile

November 10, 2021Apollo Router: our GraphQL Federation runtime in Rust At Apollo, we help developers power the world’s most important applications with a graph. Whether you’re shopping online, booking travel, or binge-watching your favorite movies, you’re using the graph every day. These experiences are all built on Apollo Federation, an architecture for declaratively composing GraphQL APIs into a

November 3, 2021Moving Apollo Federation 2 to the Elastic License v2 Today, we are introducing Apollo Federation 2, a major update to our graph composition technology that lets developers build and evolve a unified graph in a modular, principled way. Federation 2 is a new implementation of our query planner and execution gateway that introduces a more flexible model for how types and fields compos

Blog /GraphQL /Security /9 Ways To Secure your GraphQL API — GraphQL Security Checklist Back to Blog May 26, 20219 Ways To Secure your GraphQL API — GraphQL Security Checklist So you’ve built out your GraphQL API, and you’re nearly ready to deploy it to production. Fantastic. Let’s talk security: a significant part of every stable application on the internet. It’s worth taking some time to mitigat

This is a guest post by James Mortemore, who is a software engineer at YLD. He has an extensive background in API development & enterprise integration architecture. Out of the box, GraphQL supports validating your inputs based on type information. For example, you can ensure that an argument is a particular scalar type, such as String or Int. You can also enforce the shape of object arguments usin

We recommend reading Core pagination API before learning about considerations specific to cursor-based pagination. Using list element IDs as cursorsSince numeric offsets within paginated lists can be unreliable, a common improvement is to identify the beginning of a page using some unique identifier that belongs to each element of the list. If the list represents a set of elements without duplicat

Automatic Persisted Queries Improve network performance by sending smaller requests Clients send queries to Apollo Server as HTTP requests that include the GraphQL string of the query to execute. Depending on your graph's schema, the size of a valid query string might be arbitrarily large. As query strings become larger, increased latency and network usage can noticeably degrade client performance

Blog /tooling /Apollo Codegen /TypeScript GraphQL Code Generator – Generate GraphQL Types with Apollo Codegen Tutorial Back to Blog April 1, 2021TypeScript GraphQL Code Generator – Generate GraphQL Types with Apollo Codegen Tutorial Don Norman, the author of “The Design of Everyday Things” has a philosophy for what he believes constitutes good design. Don says that good design is primarily discove

March 9, 2021Getting Started With Apollo Client in Next.js (Update May 2023) We published a library that makes it easier to use Apollo Client with Next.js 13, this guide still remains valid if you’re using the pages directory. Wait, you want me to put my data where!? Figuring out how to configure Apollo Client with Next.js can be a bit confusing. This confusion stems from the fact that there are t

The GraphQL specification includes default scalar types Int, Float, String, Boolean, and ID. Although these scalars cover the majority of use cases, some applications need to support other atomic data types (such as Date) or add validation to an existing type. To enable this, you can define custom scalar types. Defining a custom scalarTo define a custom scalar, add it to your schema like so: You c

Reactive variables State containers integrated into Apollo Client's reactivity model New in Apollo Client 3, reactive variables are a useful mechanism for representing local state outside of the Apollo Client cache. Because they're separate from the cache, reactive variables can store data of any type and structure, and you can interact with them anywhere in your application without using GraphQL

January 29, 2021Redux to Apollo: Data Access Patterns As part of NerdWallet’s migration from our React-Redux code base to client state management using Apollo, we’ve been exploring how to effectively implement data access patterns, side-effects handling, and other aspects of client state management using GraphQL and Apollo Client. This first post examines how we accomplish effective data access, f

GraphQL TutorialsBoost your developer skills with our hands-on GraphQL tutorials and trainings

Get Started with Apollo Server Set up a simple GraphQL API with TypeScript or JavaScript This tutorial helps you: Obtain a basic understanding of GraphQL principles Define a GraphQL schema that represents the structure of your data set Run an instance of Apollo Server that lets you execute queries against your schema This tutorial assumes that you are familiar with the command line and JavaScript

Apollo Client has a particularly challenging responsibility: to make interconnected GraphQL data easy to use on the client-side. In most rich client applications, we need the ability to cache data and pass it to components. We also need to know when to re-fetch data vs. when to return what’s already cached; this helps to avoid making unnecessary network requests. This kind of caching logic can be

Before there was GraphQL, there was REST. In recent years, REST has become the dominant API style for building backend web services. With REST, you could signal the type of request we want to make (ex: GET, POST, PUT, or DELETE) and the resource we’d like to fetch or interact with (ex: /api/pets/1) using an HTTP method and a URL. It’s a great approach (and one we initially used at StockX for sever

If your graph includes thousands or millions of books, this query probably returns much more data than you need. To resolve this issue, GraphQL servers can paginate their list fields. When a client queries a paginated list field, the server returns only a portion (or "page") of the list's elements. The client's query includes arguments that indicate which page the server should return: This diagra

If you learn best by doing, check out the intro tutorial to GraphQL with TypeScript & Apollo Server. Your GraphQL server uses a schema to describe the shape of your available data. This schema defines a hierarchy of types with fields that are populated from your back-end data stores. The schema also specifies exactly which queries and mutations are available for clients to execute. This article de

Get started with Apollo Client Set up Apollo Client and fetch GraphQL data with React \n );\n}"],"hast":[0,{"type":[0,"root"],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"pre"],"properties":[0,{"class":[1,[[0,"shiki"],[0,"shiki-themes"],[0,"github-light-default"],[0,"houston"],[0,"p-4"],[0,"rounded-b-md"],[0,"text-base/6"]]],"style":[0,"background-color:#F2F4F4;--shiki-dark-bg:#0D171C;col

July 14, 2020Announcing the Release of Apollo Client 3.0 Today we’re thrilled to announce the official release of Apollo Client 3.0! This release is the culmination of 55 betas, 14 release candidates, and hundreds of resolved issues and merged pull requests over the past eleven months. Phew! To everyone who’s tried out AC3 during this extended beta period, thank you. We couldn’t have reached this

Mutations in Apollo Client Modify data with the useMutation hook \n {\n e.preventDefault();\n addTodo({ variables: { type: value } });\n setValue(\"\");\n }}\n >\n {\n setValue(e.target.value);\n }}\n />\n Add Todo\n \n \n );\n}"],"hast":[0,{"type":[0,"root"],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"pre"],"properties":[0,{"class":[1,[[0,"shiki"],[0,"shiki-themes"],[0,"github-light-def

1// Mutation definition 2const UPDATE_COMMENT = gql` 3 mutation UpdateComment($commentId: ID!, $commentContent: String!) { 4 updateComment(commentId: $commentId, content: $commentContent) { 5 id 6 __typename 7 content 8 } 9 } 10`; 11 12// Component definition 13function CommentPageWithData() { 14 const [mutate] = useMutation(UPDATE_COMMENT); 15 return ( 16 <Comment 17 updateComment={({ commentId,