Awesome Angular GraphQL

A curated collection of resources, clients and tools that make working with GraphQL and Angular awesome.

Contents

• General Resources
• Clients
• Developer Tools
• Tutorials
• Boilerplates
• Server Side Tools
• Articles and Videos
• Stories

General Resources

• GraphQL
• Angular

Clients

Angular clients for GraphQL

• Apollo: Apollo Client is a community-driven GraphQL client for Angular, JavaScript, and native platforms
  • Docs
  • Github
  • Slack
  • Discord

Developer Tools

Tools for better development (debugging, linting, validation etc)

• Code generators:
  • apollo-codegen: Generate API code or type annotations based on a GraphQL schema and query documents
  • graphql-code-generator: GraphQL code generator with flexible support for custom templates
• Linters:
  • eslint-plugin-graphql: Check your GraphQL query strings against a schema
• Angular Debugging Tools
  • Apollo Client Developer Tools: Chrome extension for Apollo Client developer tools
  • Augury: Augury is a Google Chrome Dev Tool extension for debugging and visualizing Angular applications at runtime.
  • Redux DevTools
    Relay outside Chrome
• GraphQL Workflows:
  • GraphQL Playground: Powerful GraphQL IDE built on top of GraphiQL
  • Altair GraphQL Client: A beautiful feature-rich GraphQL Client for all platforms
  • GraphiQL Online: An online version of GraphiQL with a configurable endpoint and headers.

Tutorials

Awesome tutorials for using GraphQL with Angular

• Angular, GraphQL and Apollo
  • Angular + Apollo Tutorial
  • Angular GraphQL Tutorial
  • (Video) Apollo Client For Angular - Making Use of GraphQL
  • (Video) Apollo Angular GraphQL Optimistic UI
  • Fetching Data using GraphQL Queries with Angular & Apollo Tutorial
  • (Video) Using GraphQL with Angular
  • (Video) Faster modern apps with Angular and GraphQL

Boilerplates and Example Apps

Boilerplates and examples for a headstart in development

• Angular Apollo GraphQL
  • Angular Fullstack Graphql
  • Angular Todo App using Apollo Client
  • Angular AppSync Starter AppAn AWS AppSync Chat Starter App written in Angular.
  • Next.js With Apollo - Boilerplate for building Next.js apps with Apollo.
  • Apollo Angular SSR - Apollo-Angular with SSR and Store Rehydration
  • Apollo Angular

Server Side Tools

Get a GraphQL backend for your applications using these service providers

• AWS AppSync: Build data-driven apps with real-time and offline capabilities
• Graphcool: Self-Hosted GraphQL BaaS
• Hasura: Instant GraphQL APIs on Postgres
• Postgraphile: Rapidly build highly customisable GraphQL APIs
• Prisma: Turn your database into a GraphQL API.

Articles and Videos

Articles

• So what’s this GraphQL thing I keep hearing about?
• Thinking in Graphs
• What are the benefits of using GraphQL and why it surpasses REST
• How To Use GraphQL with Angular 2 (with Example)
• Angular 4 + Apollo + GraphQL
• Learn how to use GraphQL with Angular using Apollo
• Using Apollo GraphQL with Angular
• Generating Angular API clients with Apollo and GraphQL code generator
• How to Leverage GraphQL with a Headless CMS [TakeShape Tutorial]

Videos

• From REST to GraphQL
• GraphQL vs Firebase
• Apollo Client For Angular - Making Use of GraphQL
• Deploying a Angular + Apollo app with Surge.sh - How to GraphQL
• Angular2 + GraphQL = build modern web apps with GraphQL
• Modernize your Angular apps with GraphQL by Uri Goldshtein

Stories

Good and bad experiences

• Jeff Cross: Faster Modern Apps with Angular and GraphQL
• (Video) Lessons from 4 Years of GraphQL
• 2017: The year in GraphQL
• Harry Wolf: Experiences with GraphQL