Awesome Vue GraphQL

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

Contents

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

General Resources

• GraphQL
• VueJS
• Vue-Apollo

Clients

VueJS clients for GraphQL

• Apollo: Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms
  • Docs
  • Github
  • Slack
• AWS Amplify: AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers.
  • Docs
  • Github
  • Gitter

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
• VueJS debugging tools
  • VueJS Developer tools: Chrome and Firefox extensions to debug vue applications
• VueJS Apollo Debugging Tools
  • Apollo Client Developer Tools: Chrome and Firefox extension for Apollo Client developer tools
• 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 Vue

• VueJS
  • Vue + Apollo Tutorial
  • Getting Started with VueJS
  • Making a ToDo application with VueJS
  • Getting started with VueJS, apollo and Graphql
  • (Video) Using GraphQL, VueJS and Apollo to Create Blog Application
  • (Video) VueJS, Apollo and GraphQL
• Miscellaneous
  • Why VueJs and GraphQL can be ultimate stack

Boilerplates and Example Apps

Boilerplates and examples for a headstart in development

• VueJS Apollo
  • Vue + GraphQL + Auth0
  • Vue + Vuetify + Vuex
  • Nuxt.js + GraphQL
  • Vue + Graphql + Apollo Tutorial
  • VueJs Starter app with AWS amplify

Advanced Use Cases

• Server-side Rendering
  • Understanding Server-side rendering with Vue Apollo
• Realtime
  • Polling: Dynamic GraphQL polling with React and Apollo Client
  • Subscriptions with Vue Apollo Client: Learn how to achieve realtime data with GraphQL subscriptions using Vue Apollo Client.
  • Managing Local Data: if You need to manage your app lcoal state you can do so with apollo link state.
• JWT
  • Ultimate guide to handling JWTs on frontend clients

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: Simplifies database access in your resolvers (replacing traditional ORMs).

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
• Create Nuxt.js Universal Apps with GraphQL on Postgres
• Leveraging Vue.js & GraphQL with Gridsome

Videos

• From REST to GraphQL

Stories

Good and bad experiences

• Between the Wires: An interview with Vue.js creator Evan You
• (Video) Lessons from 4 Years of GraphQL
• 2017: The year in GraphQL
• Harry Wolf: Experiences with GraphQL
• JetRuby: Our experience with GraphQL