Fetch your GraphQL data automagically: Building a movie app with Hasura & gqless

In this tutorial, we will build a movie app using Hasura and gqless. Firstly, we will set up Hasura by creating two tables - movies and characters. We will then create a one-to-many relationship between these two tables. Next, we will set up the React app with necessary dependencies such as gqless, @gqless/react, typescript, and @gqless/cli. After setting up the basic app structure, we will use gqless to fetch data from Hasura without writing any GraphQL queries manually. We will also demonstrate how to list characters for each movie using gqless. Furthermore, we will add React Router for navigation and emotion for styling. To improve performance, we will customize the cache using gqless's extensions by setting keyed values and cached redirects. Finally, we will make some cleanups and add components to list characters for each movie. In conclusion, this tutorial demonstrates how to set up array relationships with Hasura, use gqless with a GraphQL endpoint, and utilize various features of gqless such as automatic data fetching, type generation, and caching behavior extensions.