Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.

Documentation

All Apollo Client documentation, including React integration articles and helpful recipes, can be found at:
https://www.apollographql.com/docs/react/

The Apollo Client API reference can be found at:
https://www.apollographql.com/docs/react/api/apollo-client/

Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform:
https://odyssey.apollographql.com/

Maintainers

Who is Apollo?

Apollo builds open-source software and a graph platform to…

React Apollo

⚠️ THIS PROJECT HAS BEEN DEPRECATED ⚠️

Please note that 4.0.0 is the final version of all React Apollo packages. React Apollo functionality is now directly available from @apollo/client >= 3. While using the @apollo/react-X packages will still work, we recommend using the following imports from @apollo/client directly instead:

• old: @apollo/react-components --> new: @apollo/client/react/components
• old: @apollo/react-hoc --> new: @apollo/client/react/hoc
• old: @apollo/react-ssr --> new: @apollo/client/react/ssr
• old: @apollo/react-testing --> new: @apollo/client/testing
• old: @apollo/react-hooks --> new: @apollo/client

Moving forward, all Apollo + React issues / pull requests should be opened in the apollo-client repo. Please refer to the Apollo Client migration guide for more details.

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js…

Relay ·

Relay is a JavaScript framework for building data-driven React applications.

• Declarative: Never again communicate with your data store using an imperative API. Simply declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data.
• Colocation: Queries live next to the views that rely on them, so you can easily reason about your app. Relay aggregates queries into efficient network requests to fetch only what you need.
• Mutations: Relay lets you mutate data on the client and server using GraphQL mutations, and offers automatic data consistency, optimistic updates, and error handling.

See how to use Relay in your own project.

Example

The relay-examples repository contains an implementation of TodoMVC. To try it out:

git clone https://github.com/relayjs/relay-examples.git
cd relay-examples/todo
yarn
yarn build
yarn start

Then, just point your browser at http://localhost:3000.

Contribute

We actively welcome pull requests, learn how to…

Use AWS AppSync with JavaScript apps ·

AWS AppSync is a fully managed service that makes it easy to develop GraphQL APIs by handling the heavy lifting of securely connecting to data sources like AWS DynamoDB, Lambda, and more.

You can use any HTTP or GraphQL client to connect to a GraphQL API on AppSync.

For front-end web and mobile development, we recommend using the AWS Amplify library which is optimized to connect to the AppSync backend.

• For DynamoDB data sources where conflict detection and resolution are enabled on AppSync, use the DataStore category in the Amplify library.
• For non-DynamoDB data sources in scenarios where you have no offline requirements, use the API (GraphQL) category in the Amplify library.
• If you want to use the Apollo V3 client, use the Apollo Links in this repository to help with authorization and subscriptions.

Looking for the AWS AppSync SDK for…

SECURITY WARNING: both graphql-playground-html and all four (4) of it's middleware dependents until graphql-playground-html@1.6.22 were subject to an XSS Reflection attack vulnerability only to unsanitized user input strings to the functions therein. This was resolved in graphql-playground-html@^1.6.22. More Information CVE-2020-4038

Future of this repository: See this issue for details.

GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).

Installation

$ brew install --cask graphql-playground

Features

• ✨ Context-aware autocompletion & error highlighting
• 📚 Interactive, multi-column docs (keyboard support)
• ⚡️ Supports real-time GraphQL Subscriptions
• ⚙ GraphQL Config support with multiple Projects & Endpoints
• 🚥 Apollo Tracing support

Security Details

NOTE: only unsanitized user input to the functions in these packages is vulnerable to the recently reported XSS Reflection attack.

Impact

Impacted are any and all unsanitized user-defined input to -renderPlaygroundPage() -koaPlayground() -expressPlayground() -koaPlayground() -`lambdaPlayground()

If you used static values, such as graphql-playground-electron does…

apollo-cache-updater

Zero-dependencies helper for updating the apollo cache after a mutation

Status

Under heavy development

Why?

I wanted an updater that steals the magic of refetch queries while keeping the power of apollo local cache, but stripped of the boilerplate usually needed for each mutation update.

Updating the local cache becomes exponentially complicated when it needs to:

• include multiple variables
• include multiple queries
• know which of our target queries has been already fired before our speficific mutation happend
• cover scenarios** where apollo's in-place update may not be sufficient

** Add/remove to list, move from one list to another, update filtered list, etc.

This solution tries to decouple the view from the caching layer by configuring the mutation's result caching behavior through the Apollo's update variable.

Demo

Install

$ npm install --save apollo-cache-updater

OR 

$ yarn add apollo-cache-updater

Usage

Example: Add an Article

The following block of code:

• adds a new…

Apollo CLI

[2023-03-29] Note - all apollo service:* commands will reach end-of-life on April 28th, 2023. Refer to this blog post for more details.

[2022-07-07] Are you here for codegen? We highly recommend using graphql-code-generator instead. Codegen in this repo is no longer supported and will be removed completely in a future version. For additional migration details, please see this fantastic writeup by @dotansimha: #2053

[2022-01-21] Note - Upcoming Deprecation Plans: We (Apollo) are working towards fully deprecating this repository and its related projects. Most of the functionality in this repository has been replaced by newer projects and the rest will be soon. We'll share detailed migration documentation when everything here is ready to be officially deprecated, but just a heads up in case you're planning on adopting anything here for a new project (which you still can of course if the tooling here works for you - support for…

https://the-guild.dev/graphql/codegen

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment).

By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you're using, GraphQL Code Generator has you covered.

GraphQL Code Generator lets you choose the output that you need, based on plugins, which are very flexible and customizable. You can also write your plugins to generate custom outputs that match your needs.

You can try this tool live on your browser and see some useful examples. Check out GraphQL Code Generator Live Examples.

We currently support and maintain these plugins (TypeScript, Flow…

eslint-plugin-graphql

[2022-01-25] Note - Upcoming Deprecation Plans: We (Apollo) are working towards fully deprecating this repository. We suggest migrating to the community-supported graphql-eslint. We'll share detailed migration documentation when everything here is ready to be officially deprecated, but just a heads up in case you're planning on adopting anything here for a new project (which you still can of course if this project works for you - support for this project will be minimal however).

An ESLint plugin that checks tagged query strings inside JavaScript, or queries inside .graphql files, against a GraphQL schema.

npm install eslint-plugin-graphql

eslint-plugin-graphql has built-in settings for four GraphQL clients out of the box:

1. Apollo client
2. Relay
3. Lokka
4. FraQL

If you want to lint your GraphQL schema, rather than queries, check out cjoudrey/graphql-schema-linter.

Importing schema JSON

You'll need to import your introspection query result or the schema as a string in the Schema…