November 2021 Summaries

This article compares three popular front-end hosting providers - Vercel, Gatsby Cloud, and Netlify. It highlights the benefits of serverless functions for front-end developers and how these platforms are blurring the boundaries between host and FaaS provider. The comparison includes framework integration, USP for developer experience, and execution metrics such as invocation, languages supported, memory size, timeout, and location. Additionally, it discusses how Hasura Cloud fits into this hosted paradigm of low-ops, managed services to build applications faster with better developer experience.

The popularity of GraphQL API is growing rapidly, with many Fortune 500 companies using it for their backends. One unified endpoint for your backend, improved application performance, enhanced system reliability, and better developer experience are some key advantages of adopting GraphQL API. It simplifies data access, supercharges the product development process, improves app performance by reducing JSON payload size and network overhead from multiple API calls, and ensures API consistency, reliability, and security. Companies like Netflix and Pulley have reported faster page load times and overall app performance after switching to GraphQL APIs.

Hasura recently migrated from CircleCI to Buildkite as their primary CI system. The main reason for this change was to control costs, as the usage of CircleCI had doubled after creating a monorepo and the engineering team grew significantly. They aimed to reduce annual CI spend by 40-50%. Additionally, they sought to improve the overall CI experience with features not provided by their old system. After evaluating various options, Buildkite was chosen due to its alignment with cost requirements and ability to provide more control. The new CI system allowed for running CI jobs on various platforms, autoscaling build nodes, and multiple triggering strategies. It also supported the use of a programming language (Go) instead of YAML for configuration, which was considered more expressive and helpful while building and modifying pipelines. The new CI system has been running on Hasura's internal monorepo for about 45 days now, with no major outages during the entire project. While it is difficult to predict if they will achieve their cost goals, they believe that they are staying on track for it.

In this post, we discuss how to leverage AWS services with Hasura Cloud for various functionalities and use cases. We will look at how to integrate these services from a 3factor app architecture and event-driven serverless pattern. Key points include using AWS RDS for Database, AWS Cognito for Authentication, and AWS Lambda for Events and Custom Business Logic. The process involves setting up Hasura Cloud, creating an AWS RDS PostgreSQL database, connecting the database to Hasura Cloud, setting up Amazon Cognito for user sign-up/sign-in, adding custom JWT claims using Lambda, configuring Hasura Cloud with Cognito configuration, and setting up serverless functions for custom business logic.

Hasura is participating in AWS re:Invent for the first time and invites members of the Hasura Community to meet them at their booth #402. They will be offering demos, expert consultations, and a chance to meet the team behind Hasura. Additionally, they are hosting 1:1 consultations with their technical team on various topics related to GraphQL API performance, data federation, authorization, caching, and more. A Happy Hour event is also planned at The Wynn for attendees to chat with the Hasura team about their roadmap and strategies. Finally, limited edition Hasura t-shirts are available for reservation.

In this article, we discuss strategies for implementing GraphQL with React Query. We start by updating our base example to include an input field that lets users provide HEX colors and receive a complementary color scheme automatically returned. We then explore two methodologies for updating content in React Query: invalidating cache and subscriptions. Invalidating cache involves calling a cache invalidation call after successfully updating from the server, while subscriptions allow us to update results when they become available. We demonstrate how to create a useColorSubscription hook that implements graphql-ws and updates React Query's cache on successful message reception. We also refactor our main application code to loop over this cache and handle asynchronous content more efficiently. Additionally, we introduce GraphQL Codegen for generating TypeScript types from GraphQL schemas and using them with React Query hooks. By following these strategies, developers can effectively manage their applications' data fetching and caching processes while leveraging the power of GraphQL subscriptions.

In this article, we explore React Query, a data management library for React applications. We compare it to other libraries like Apollo and Urql, highlighting its unique features such as being tailor-made for React, focusing on server state, and offering an opinionated-first approach. We also discuss the basic concepts of React Query, including its client wrapper, hooks, refetch defaults, initial data for hydration, dependent queries, and familiar data methods. Lastly, we demonstrate how to connect React Query with Hasura using a simple example.

This article provides a comprehensive guide on how to request a GraphQL API using Fetch or Axios. It begins by explaining that GraphQL is just a query language and popular implementations leverage existing JSON standards for requests and responses over HTTP. The key components of a GraphQL request are the endpoint, headers, and request body in JSON format. The JSON body contains three objects: operationName (optional), query (the actual GraphQL query), and variables (an optional object used to pass dynamic values). The article then provides an example of a basic GraphQL query and demonstrates how to make a GraphQL API request using Fetch or Axios in JavaScript. It also explains how to handle errors in the response object. The author recommends checking out their open source tutorial on Introduction to GraphQL for those new to the technology.