Tutorials & Guides

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

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

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.

Slack notifications with Mutation Callbacks

#mutation-callbacks#functions#slack#zapier#open-source
Use mutation callbacks 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.

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.

Create GraphQL React Apps with Apollo Client

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

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.

Relay vs. Apollo - Mutations

#clients#mutations#relay#apollo-client
Relay vs. Apollo Client: Learn about the differences between Relay and Apollo Client regarding GraphQL mutations based on an example.

Relay vs. Apollo - Comparing GraphQL Clients

#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.

Relay vs. Apollo - Fetching Data With GraphQL

#clients#queries#relay#apollo-client
Relay vs. Apollo Client: See a comparison between sending GraphQL queries in Relay and Apollo Client based on an example GraphQL query.

Relay vs. Apollo - Setting Up the Environment

#clients#relay#apollo-client
Relay vs. Apollo Client: Relay and Apollo Client have different requirements for the development environment they can be used in.

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.

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.

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.

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.

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.

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.