Tutorials & Guides

Helpful step-by-step tutorials & guides to understand how to build apps with Graphcool.

Authorization for a CMS with GraphQL Permission Queries

#permissions#authorization#platform#console
Learn how to build secure authorization in GraphQL by defining role-based, owner-based and relation-based permissions powered by flexible filters.

Migrating to Relay Modern

#clients#relay-modern#relay-classic#relay#migration#upgrade
Learn how to migrate a project from Relay Classic to Relay Modern

Freecom Tutorial: Realtime Updates with GraphQL Subscriptions (3/6)

#freecom
Realtime Updates with GraphQL Subscriptions

Implementing Business Logic using Mutation Callbacks

#functions#mutation-callbacks#webtask#mailgun
Add custom business logic to a GraphQL backend. In this guide, we will add a Mailgun integration to notify users of new comments to their posts.

Setting up a GraphQL backend in 5 minutes

#console#models#fields
Getting started with a powerful GraphQL backend can be done in a few minutes with Graphcool.

How to build a Real-Time Chat with GraphQL Subscriptions and Apollo 🌍

#subscriptions#apollo#open-source
Build a realtime chat where the users can see the locations of all participants on a map - using GraphQL subscriptions and the Apollo client

Calling the API from a mutation callback with Lokka

#functions#mutation-callbacks#webtask#lokka#client-apis#open-source
Send queries and mutations to the GraphQL client APIs from a webtask using GraphQL Lokka.

Calling the API from a mutation callback with plain HTTP

#functions#mutation-callbacks#webtask#plain-http#client-apis#open-source
Send queries and mutations to the GraphQL client APIs from a webtask using plain http requests.

How to use `create-react-app` with GraphQL & Apollo

#react#clients#apollo#instagram#open-source
Connecting to a GraphQL backend is really simple with create react app and Apollo Client.

Tutorial: Using create-react-native-app with GraphQL & Apollo

#react-native#clients#apollo#instagram#open-source
Connecting to a GraphQL backend is really simple with create-react-native-app and Apollo Client. Learn how to do so in this simple tutorial.

Designing Powerful APIs with GraphQL Query Parameters

#platform#queries#client-apis#query-arguments#filters#order-by#pagination
GraphQL queries provide an efficient way to fetch data. Our GraphQL API leverages different GraphQL query arguments to provide even more control.

How to use GraphQL with jQuery

#queries#mutations#jquery#open-source
Learn how to use GraphQL with jQuery by building a simple Pokedex example app

Relay vs Apollo - Comparing GraphQL clients for React apps

#clients#queries#mutations#relay#apollo-client
Relay vs. Apollo Client: Find out which GraphQL client works best for you by learning about differences between Relay and Apollo Client.

User Authentication with Auth0 for React and Apollo

#authentication#auth-providers#integrations#react#apollo#open-source
Learn how to provide secure data access to your GraphQL backend and provide user authentication with Auth0 in React and Apollo.

User Authentication with Digits for React and Apollo

#authentication#auth-providers#integrations#react#apollo#open-source
Learn how to provide secure data access to your GraphQL backend and provide user authentication with Digits in React and Apollo.

User Authentication with Email for React and Apollo

#authentication#auth-providers#integrations#react#apollo#open-source
Learn how to provide secure data access to your GraphQL backend and provide email/password-based user authentication with Auth0 in React and Apollo.

Managing files in a Graphcool project

#file-management#client-apis#queries#mutations#plain-http
Upload, download, rename or delete files that are hosted at your GraphQL backend.

Sending Slack Notifications with GraphQL & Zapier

#mutation-callbacks#functions#slack#zapier#open-source
Use Zapier to create a Slack integration for your GraphQL server and get Slack notifications whenever a certain mutation is executed.

Stripe Payment Workflow with Mutation Callbacks

#mutation-callbacks#functions#stripe#open-source
Use mutation callbacks to implement a custom Stripe payment workflow to verify credit card details and charge customers.

Declaring Relations between your Models

#console#relations#models#fields
Add relations to your GraphQL backend to define interactions between models in your data schema. Relations are reflected in your GraphQL schema.

Importing complex data using a script

#scripts#data-management#data-import#lokka#plain-http#open-source
Use a script to import nested JSON data to your GraphQL backend.

Importing simple data using a script

#scripts#data-management#data-import#lokka#plain-http#open-source
Use a script to import simple JSON data to your GraphQL backend.

Migrating Data using a Node Script

#scripts#data-schema#migration#lokka#open-source
When you want to bulk migrate your existing data, you can run a migration script that combines multiple GraphQL mutations in one GraphQL request.

Managing date and time values

#functions#mutation-callbacks#webtask#plain-http
Manage date and time values with the ISO 8601 format when working with your GraphQL server.

Algolia Auto-Sync for GraphQL backends

#algolia#integrations#data-management#open-source
Automatically synchronize data from your GraphQL backend to Algolia. Algolia Instant Search provides intuitive and fast search experiences.

Freecom: Building Intercom with GraphQL and Apollo (Overview)

#freecom
Full-stack tutorial series to build an Intercom-clone with React, Apollo & GraphQL.

Freecom Tutorial: Designing the Schema & GraphQL Server (1/6)

#freecom
Learn about Freecom's data model and how to generate a Graphcool backend from the CLI.

Freecom Tutorial: Apollo Setup & GraphQL Queries/Mutations in React (2/6)

#freecom
Learn how to integrate Apollo into your React app and run GraphQL queries & mutations.

Thinking in Terms of Graphs

#models#relations
Think in graphs and explore a powerful concept that GraphQL terms like nodes and edges are based on.