Performant GraphQL Backend in 1 Day Using Hasura Engine 2022

Explore the Hasura console and its playground for building GraphQL queries and mutations. See explorer, voyager, and docs for code generation and SQL translation.

Sort query results with order by on fields like created_at, choosing ascending or descending to toggle oldest or newest, while handling nulls and applying distinct on to remove duplicates.

Explore Hasura data filtering using underscore operators such as _eq, _neq, _gt, _gte, _lt, _lte, _in, _nin, and _is_null to refine date and id queries.

Discover full text search in Hasura by using _like, _ilike, _nlike, and _similar operators on text fields like description. Learn to control case sensitivity with patterns and SQL-style matching.

Learn how to implement pagination in Hasura using limit and offset to fetch photos page by page. Set limit to two, apply offset (page-1)*limit to retrieve subsequent pages.

Set up a comments table, define a photo_id foreign key, and expose the relation in Hasura to query nested comments with GraphQL.

Master GraphQL mutations in Hasura to create items, including single and bulk inserts, upsert with on conflict, selecting returning fields, and observing affected rows.

Update items in Hasura using primary key or bulk mutations, set fields like description with underscore set, specify where, and return IDs and descriptions to verify changes.

Master delete operations in Hasura: remove a single item by primary key using its id and perform bulk deletions with a conditional mutation, returning affected rows and ids.

Mutations demonstrate inserting a photo with a predefined command and expanding to nested comments. Hasura automatically resolves the photo id for the comment, enabling nested object mutations and CRUD.

Define and apply variables in GraphQL queries, mutations, and subscriptions to replace hardcoded values with dynamic inputs, using a JSON payload and declared types.

Convert queries into real-time subscriptions with Hasura, applying filtering, sorting, and pagination to receive live updates without page reloads; see new items appear in real time.

Extend Hasura's built-in capabilities by using event triggers, actions, and remote schemas to add business logic, including serverless options like Firebase Cloud Functions for easy logic expansion.

Set up a Firebase project, install and run Firebase tools, initialize functions and storage in VS Code, deploy a Hello world cloud function, and prepare to connect Firebase with Hasura.

Configure Hasura event triggers on the comments table insert to send emails via a webhook to a locally served function, using http host dot docker dot internal.

Explore how Hasura actions extend a GraphQL schema by delegating mutations to REST endpoints, enabling seamless integration with microservices and unified data delivery.

Create a Hasura action for creating a user, define input and output types, wire a cloud function using Firebase authentication, and return a user with id, email, and display name.

Create a Hasura user profile action to fetch profile data by id from cloud functions, then define one-to-many relations to photos and comments, and explore remote schema.

Learn how remote schema merges multiple microservices into a single GraphQL schema using Hasura engine. Combine photo and account services to fetch photos with user profiles without client-side stitching.

Learn how to implement a remote GraphQL schema with an Apollo Server cloud function, connect it to Hasura as a remote schema, and fetch merged user profile data alongside photos.

Learn how to extend Hasura business logic with events, actions, and remote schemas, including when to use each, and how to delegate to third-party services while noting current restrictions.

Secure Hasura endpoints by configuring admin secret in docker compose file, restart containers, and note that the x-hasura-admin-secret header grants admin access; avoid exposing passwords in git or client code.

Learn how to authenticate in Hasura using JWT by generating a payload with x hasura claims, configuring the Hasura JWT secret, and sending a bearer token in requests.

Implement jwt authentication using firebase rest api with a hasura-backed backend, via an action that logs in to obtain an access token and configure hasura jwt secret for role-based permissions.

Create a user role and assign insert, select, update, and delete on photos with owner checks, using session variables from the Firebase JWT (x Hasura user id) to enforce permissions.

Learn to implement public access in Hasura by defining an anonymous role and enabling login actions for unauthenticated users. Configure the unauthorized user in docker compose and restart containers.

Configure a webhook authentication flow in Hasura by using the auth hook to delegate to a custom endpoint, validating a secret header and returning Hasura session variables.

Protect your Hasura project across environments by using migrations and metadata to reproduce databases, manage Docker-based setups, and avoid committing database data.

Learn how migrations snapshot and restore your hasura state with up and down YAML files for Postgres schema changes, and how metadata covers permissions, relationships, event triggers, and GraphQL configurations.

Install and use the Hasura command line interface to automate migrations, initialize a Hasura project with the hasura init command, and manage folders like migrations, seeds, and metadata alongside config.yaml.

Create the initial migration with Hasura migrate create init from-server and endpoint, configured via config.yaml, generating app.sql that defines photo and comments tables with primary and foreign keys and indexes.

Learn how to export Hasura metadata with the Hasura metadata export command, using the existing config.yaml and admin secret, and review exported actions, tables, triggers, and remote schemas.

Learn to check and synchronize migrations with Hasura migrate status, understand source vs database status, and apply migrations locally or to a cloud Hasura instance.

Learn to apply metadata to a Hasura instance, compare local and server state with Hasura metadata diff, and apply changes to unify remote and local environments.

Keep your Hasura migrations and metadata in sync by using the Hasura console via the CLI, which auto-generates migrations for schema and permission changes, ensuring no step is missed.

Learn how to squash multiple Hasura migrations into a single feature migration using Hasura migrate squash, starting after init migration, with guidance on testing and applying without execution.

Learn to seed data for new tables with seed migrations in Hasura, automating inserts into a cities table and exposing the relation to GraphQL.

Roll back Hasura migrations with migrate apply using --go to a target version, run down.sql, and restore to the latest state or a single migration with --version and --type.

Extend login to return user ID, update actions and functions, and adjust permissions for the user role; connect Firebase user profile via remote schema to comments, enabling comment counts.

Create an action in Hasura to upload a file by sending a base64 image to a cloud function, which stores it in Firebase storage and returns a URL.

Build a simple Angular frontend for your GraphQL backend by creating an app with ng new, installing Angular Material, and connecting to your Hasura endpoint to run on localhost:4200.

Develop a signup page by creating a registration form in an Angular app, wire it to a Hasura GraphQL mutation via Apollo, and verify user creation with Firebase.

Implement a sign-in page connected to Hasura, build a login form with email and password, call a login mutation via Apollo, store token in local storage, and redirect to root.

Generate typed TypeScript interfaces and Angular services for each query, mutation, or subscription from your GraphQL schema using GraphQL Code Generator, decoupling queries stored in GraphQL files for Hasura endpoints.

Learn to protect an Angular profile page with a router guard, fetch user data from a Hasura GraphQL backend using an id parameter and admin secret.

Configure Apollo client with a setContext link to attach a bearer token from local storage for most GraphQL requests, skipping auth on sign in and sign up mutations.

Implement a file upload component that triggers a GraphQL mutation via a Hasura action to upload photos, then show a dialog form to add description and save to the database.

Fetch and render photos posted by a specific user using a Hasura backend, displaying each photo with publisher name, date, image, and a comment count plus a new comment button.

Open file details in a dialog to show a photo’s description and comments by querying Hasura with photo id, using a photo details dialog component and mat dialog in Angular.

Add comments to a photo by building a reusable comment form and submitting a GraphQL mutation. Update the Apollo cache to render new comments instantly.

Create a React app with a TypeScript template and connect it to a Hasura backend at localhost:8080 using Apollo GraphQL, Material UI, and React Router DOM.

implement a signup page that uses a hasura create user action via a graphql mutation with apollo useMutation, including form validation and redirect to sign in on success.

Implement a sign in page connected to a GraphQL login mutation via Hasura. Capture email and password, store the token in local storage, and redirect to user profile on success.

Automate type safety with GraphQL code generator to generate TypeScript types and React hooks from your Hasura schema, replacing manual typings.

Build an authentication guard with an auth context and protected route to render the user profile, and fetch profile data from Hasura via a guarded GraphQL query using admin secret.

Configure an http link and a setContext authentication link to attach a bearer token to every request based on operation name, excluding sign in and sign up.

Implement photo uploading with a file input, convert to a data URL, call a Hasura upload action, and save the image URL and description to the database via a dialog.

Fetch and render a user’s uploaded photos as a card list using a Hasura GraphQL query, displaying the uploader’s name, creation date, photo, and comments count, with grid styling.

Implement a detailed photo view in a Material UI dialog window that shows the photo description and comments, fetched lazily via Hasura GraphQL by photo ID.

Add a comment via a GraphQL mutation, manage comment state, and update the Apollo cache using read, update, and write query to show the new comment without reloading.

Configure Hasura for multi-environment local development by replacing hardcoded endpoints with environment variables for actions, remote schemas, and events, while securing secrets with dot env and gitignore.

Configure cloud functions for multi environments in Hasura projects by using runtime config json to manage environment variables, API keys, and service accounts.

Configure a multi environment React setup by reading the GraphQL endpoint from environment variables with dotenv and env-cmd, and define development and production env files at project root for CI/CD.

Create and configure two Firebase projects for development and production using the Firebase CLI, enabling authentication, storage, cloud functions, and budget alerts.

Configure a GitHub repository to use GitHub actions with secure secrets for firebase and Hasura, and manage develop and main branches for automated builds and deployments to production.

Create a GitHub Actions workflow to deploy cloud functions on push to develop, including npm install, build, and Firebase deploy, with Hasura and React deployments.

Create a GitHub actions workflow to deploy Hasura, chaining a metadata and migrations sync job after deploying cloud functions, using hasura cli to run migrate apply and metadata apply.

Launch a GitHub Actions job to deploy the React app, build with npm, generate Hasura types, and host on Firebase, while validating lint rules and syncing Hasura metadata.

Set up and deploy a production pipeline for a Hasura GraphQL backend, converting development workflows to production, triggering via PR against main, and deploying to Firebase hosting and functions.

Upgrade your Hasura project to 2.0 and 3.0 metadata by updating the CLI, docker images, and migrations, while adapting CI/CD with environment variables and new flags.

Upgrade Hasura to 2.8.1 and the latest Firebase Cloud Functions, updating dependencies, Docker images, and CLI tools, then verify the local Hasura server and console.

Upgrade your React application to React 18 and latest Apollo Client by updating dependencies, adapting to React Router DOM breaking changes, switching from Switch to Routes, and refactoring protected routes.

Upgrade an angular application from version 10 to 14 and the latest apollo client by manually updating dependencies, codegen, and environment variables for development.