Forem: Ankit Jena

The magic of react-query and supabase

Ankit Jena — Mon, 28 Jun 2021 15:06:09 +0000

It's been a while since I wrote my last article on state management in React using Context. Here's the link for anyone who wants to give it a read. And using custom hooks is still the primary way for me for state management and I have been recommending that to people as well.

In the previous post I had mentioned about UI state(theme, ux state) vs Server state(fetched data). I want to follow up on the sequel article I had promised. Let's get into it.

What we are going to build

Let's not make yet another todo list. I think having some real world data will help understand things better. For this part we are going to make an app, where you can search movies from the TMDB api, add it to your profile as recommendation.

What we are going to use

NextJS - I, by default use NextJS for any react application I build nowadays over CRA.
react-query - Data fetching/caching tool, going to help us with our "global/server state problems"
supabase - Supabase is something I have fallen in love with. It is an open source alternative to firebase(auth, database, storage) but the best part is it's Postgres. This will serve entirely as our backend. You will see how.
tailwindcss - For styling our app.

Gotta say, all of these have the best developer experience you could ask for.

Let's get started.

Setting up the client

First we need to create the next app and setup tailwind in it.

Setting up the backend(supabase)

Login into supabase and create a project. By default supabase provides you with auth. In this tutorial I won't be going all out on auth(will just do the login). After you create databases, all of them are accessible through the supabase client using an anon key that you get when you create a project. This is also where the best part of their auth architecture comes into place. All of the data by default are accessible to anyone using the anon key. But you can use row level policies on each table to achieve role/auth based authorization.

Let's first create a few tables using the inbuilt SQL editor in the dashboard, based on what we are trying to build.



CREATE TABLE users (
  id uuid references auth.users PRIMARY KEY,
  name text,
  username text unique
);

CREATE TABLE movies (
  movie_id integer PRIMARY KEY,
  title text,
  poster_path text,
  overview text,
  release_date date
);

CREATE TABLE recommendations (
   id uuid NOT NULL DEFAULT extensions.uuid_generate_v4(),
   primary key(id),
   user_id uuid,
   constraint user_id foreign key(user_id) references users(id),
   movie_id integer,
   constraint movie_id foreign key(movie_id) references movies(movie_id)
);

CREATE UNIQUE INDEX "user_id_movie_id" on recommendations using BTREE ("movie_id", "user_id");

You can create all the tables and relationships using the UI too if you want but you have both the options.
After running this the tables will be created for you. Let's see how our schema looks like using this schema visualizer.

Initializing the client

Let's install the client.



yarn add @supabase/supabase-js

Create a file called app/supabase.ts and initialize the client.



import { createClient } from '@supabase/supabase-js'

const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY);

export default supabase;

Make sure you copy over the project URL and anon key from your dashboard and paste it in .env.local file.

Before we go further let's setup react-query as well.

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.

Setting up React Query

Install the package using



yarn add react-query

and add the following to your _app.js.



...
imports
...

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0
    }
  }
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}
export default MyApp

React query has default retry of 3 times for queries, you can set your custom ones. We have set it to 0. We are also using the devtools which is an awesome tool and helps us view queries and states easily.

Let's clarify a few things before going into this, react-query is data fetching and tool you can use anyway you like. A few people confuse this with Apollo Client, but Apollo Client is for GraphQL. React Query agnostic to what you are using to fetch data and just deals with promises. Which means you can deal with REST, GraphQL API, file system request as long as a promise is returned.

With React Query, queries are when you are fetching data from the server and mutations when you are changing data on the server.

Signup

In signup we would be using supabase auth to signup and also create a user in the database with additional details.

Create a page in pages/auth/signup.tsx, for the signup form



import { useRouter } from "next/router"
import { useState } from "react"
import Loader from "../../components/ui/loader"

export default function Signup() {
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')
  const [username, setUsername] = useState('')

  return (
    <div className="min-h-screen grid place-items-center text-xl">
      <div className="w-2/3 lg:w-1/3 shadow-lg flex flex-col items-center">
      <h1 className="text-4xl font-semibold">Sign up</h1>
      <div className="mt-8 w-full lg:w-auto px-4">
          <p>Name</p>
          <input 
            type="text" 
            className="h-8 focus:outline-none shadow-sm border p-4 rounded mt-2 w-full lg:w-auto"
            onChange={e => setName(e.target.value)}
          />
        </div>
        <div className="mt-8 w-full lg:w-auto px-4">
          <p>Email</p>
          <input 
            type="text" 
            className="h-8 focus:outline-none shadow-sm border p-4 rounded mt-2 w-full lg:w-auto"
            onChange={e => setEmail(e.target.value)}
          />
        </div>
        <div className="mt-8 w-full lg:w-auto px-4">
          <p>Password</p>
          <input 
            className="h-8 focus:outline-none shadow-sm border p-4 rounded mt-2 w-full lg:w-auto"
            type="password"
            onChange={e => setPassword(e.target.value)}
          />
        </div>
        <div className="my-8 w-full lg:w-auto px-4">
          <p>Username</p>
          <input 
            type="text" 
            className="h-8 focus:outline-none shadow-sm border p-4 rounded mt-2 w-full lg:w-auto"
            onChange={e => setUsername(e.target.value)}
          />
        </div>
        <div className="mb-8 w-1/5">
          <button 
            className="bg-blue-500 text-white px-8 py-2 rounded w-full"
          >
            <span>Sign up</span>
          </button>
        </div>
      </div>
    </div>
  )
}

Let's create a custom hook in hooks/useCreateUser.ts

We can always have the fetching/mutating inside the component but having separate custom hooks gives rise to cleaner code.



import { useMutation, useQueryClient } from "react-query"
import supabase from "../app/supabase"

interface User {
  name: string;
  email: string;
  username: string;
  password: string;
}

const createUser = async (user: User) => {
  // Check if username exists
  const { data: userWithUsername } = await supabase
    .from('users')
    .select('*')
    .eq('username', user.username)
    .single()

  if(userWithUsername) {
    throw new Error('User with username exists')
  }

  const { data, error: signUpError } = await supabase.auth.signUp({
    email: user.email,
    password: user.password
  })

  if(signUpError) {
    throw signUpError
  }

  return data
}

export default function useCreateUser(user: User) {
  return useMutation(() => createUser(user), {
    onSuccess: async(data) => {
      const { data: insertData, error: insertError } = await supabase
        .from('users')
        .insert({
          name: user.name,
          username: user.username,
          id: data.user.id
        })

      if(insertError) {
        throw insertError
      }

      return insertData
    }
  })
}

Let's go through the above code.

First we have the method the create the user. In there we first check whether an user with the username exists and if it does we throw an error. So a thing to notice here is that the supabase client by default doesn't throw an error, instead returns it in the return object. Then we use supabase.auth.signUp() method with email and password. We have disabled, the email verification in supabase auth dashboard for this tutorial. If it succeeds we return the data we get back.

Next we have the default export which uses the useMutation hook from react query. We pass in the function we created above. Also since we also want to insert a user in our users table, we have onSuccess side effect in options which gets the data returned by the createUser method. Here we use supabase.from to build a insert query and we use the user id returned from the signup success.

Perfect, now we add the logic in pages/auth/signup



...
import useCreateUser from "../../hooks/useCreateUser"

export default function Signup() {
...
  const createUserMutation = useCreateUser({
    email,
    password,
    name,
    username
  })

  if(createUserMutation.isSuccess) {
    router.push("/")
  }

...

{createUserMutation.isError && <p className="text-sm mb-8 text-red-500">{createUserMutation.error.message}</p>}

...

<button 
    className="bg-blue-500 text-white px-8 py-2 rounded w-full"
    onClick={() => createUserMutation.mutate()}
    >
            {createUserMutation.isLoading? 
              <span>
                <Loader 
                  height={30}
                  width={30}  
                />
              </span> :
            <span>Sign up</span>
            }
    </button>

We import the custom hook and define it in our component. We add an onclick action on the button which triggers the mutation. We also use the isLoading, isError, error for displaying. We use the isSuccess to route the user to the home page.

Now on entering the details and clicking signup a user should be created, and you should be redirected to the signup page.

Login

Let's quickly add the login page as well.

Let's create a new page at auth/login route and add some simple ui.



export default function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <div className="min-h-screen grid place-items-center text-xl">
      <div className="w-2/3 lg:w-1/3 shadow-lg flex flex-col items-center">
        <div className="mt-8 w-full lg:w-auto px-4">
          <p>Email</p>
          <input 
            type="text" 
            onChange={e => setEmail(e.target.value)}
            className="h-8 focus:outline-none shadow-sm border p-4 rounded mt-2 w-full lg:w-auto"
          />
        </div>
        <div className="my-8 w-full lg:w-auto px-4">
          <p>Password</p>
          <input 
            className="h-8 focus:outline-none shadow-sm border p-4 rounded mt-2 w-full lg:w-auto"
            type="password"
            onChange={e => setPassword(e.target.value)}
          />
        </div>
        <div className="mb-8">
          <button className="bg-blue-500 text-white px-8 py-2 rounded">Login</button>
        </div>
      </div>
    </div>
  )
}

Create a similar hook called hooks/useLogin.ts



import { useMutation } from 'react-query'
import supabase from '../app/supabase'

const login = async ({email, password}) => {
  const { data, error } = await supabase.auth.signIn({
    email, 
    password
  })

  if(error) {
    throw new Error(error.message)
  }

  return data
}

export default function useLogin({ email, password }) {
  return useMutation('login', () => login({email, password}))
}

And similarly in pages/auth/login.tsx



...
const loginMutation = useLogin({email, password})

  if(loginMutation.isSuccess) {
    router.push('/')
  }
...
...

{loginMutation.isError && <p className="text-sm mb-8 text-red-500">{loginMutation.error.message}</p>}
...
<button 
    className="bg-blue-500 text-white px-8 py-2 rounded w-full"
    onClick={() => loginMutation.mutate()}
  >
      {loginMutation.isLoading? 
        <span>
          <Loader 
            height={30}
            width={30}  
          />
        </span> :
        <span>Login</span>
      }
   </button>

It's pretty similar to signup, we call the supabase.auth.signIn method and redirect the user if the mutation is successful.

Now if you enter your credentials, login should work.

Authenticated Pages

Now when the user logs in we want to fetch the user details, name and username in our case which will be available to the entire app. Let's create a hook for that.

Create a file in hooks/useUser.ts



import { useQuery } from 'react-query'
import supabase from '../app/supabase'

const getUser = async ({userId}) => {
  const { data, error } = await supabase
    .from('users')
    .select()
    .eq('id', userId)
    .single()

  if(error) {
    throw new Error(error.message)
  }

  if(!data) {
    throw new Error("User not found")
  }

  return data
}

export default function useUser() {
  const user = supabase.auth.user()
  return useQuery('user', () => getUser(user?.id))
}

The useQuery hook needs a unique key as the first parameter. > At its core, React Query manages query caching for you based on query keys. Query keys can be as simple as a string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and unique to the query's data, you can use it! Read more here.

We define a getUser method which uses the supabase client query builder. This is equivalent to



SELECT * FROM users where id = <userId>

In the default export, we use the supabase.auth.user() method which returns the user if session exists. Note the user?id in the getUser method call, this is because the auth.user method can initially return null and eventually resolves to a value.

Now we want to make our home page authenticated. So when a user doesn't have a session, he will be redirected to the login page.

To do that let's create a file in components/Protected.tsx



import Loader from "./ui/loader"
import { useRouter } from 'next/router'
import useUser from "../hooks/useUser"

export default function ProtectedWrapper({children}) {
  const router = useRouter()
  const { isLoading, isError } = useUser()
  if(isLoading) {
    return (
      <div className="h-screen grid place-items-center">
        <Loader height={200} width={200}/>
      </div>
    )
  }

  if(isError) {
    router.push('/auth/login')
    return (
      <div className="h-screen grid place-items-center">
        <Loader height={200} width={200}/>
      </div>
    )
  }

  return (
    <div>
      {children}
    </div>
  )
}

This is a wrapper component which basically checks for the session and redirects if it's not there. Let's see how it happens. So we are using the useUser we defined earlier and destructuring isLoading and isError from the it. If it's loading, we display a loader and if the query errors we redirect the user.

The isLoading state happens when the query is being fetched for the first time, likely during component mount for the first time/window reload.

The isError state is when the useUser query errors. This is the beauty of react query. If the session doesn't exist, the supabase.auth.user() will never resolve to a value and the getUser call will throw an error.

Also when the value returned from supabase.auth.user changes from null to user, the query is automatically refetched.

Now let's use this ProtectedWrapper inside our index page.



...
import ProtectedWrapper from "../components/Protected"

export default function Home() {
  return (
    <ProtectedWrapper>
      ...
    </ProtectedWrapper>
  )
}

Let's see it in action.

This one is when there is no session.

This one is where browser session exists.

Awesome, we can now use this wrapper in pages which we want to be authenticated.

Displaying the user

Let's create a Navbar component



import Link from 'next/link'
import Loader from "../ui/loader";
import { useRouter } from "next/router";

export default function Navbar() {
  return (
    <div className="flex items-center justify-around py-6 bg-blue-500 text-white shadow">
      <Link href="/">
        <div className="text-2xl">
          Home
        </div>
      </Link>
      <div className="text-xl flex items-center space-x-4">
        <div>
          <Link href="/search ">
            Search
          </Link>
        </div>
        <div>
          Username
        </div>
        <div
          className="cursor-pointer"
        >
          {/* Logout feather icon */}
          <svg 
            xmlns="http://www.w3.org/2000/svg" 
            width="24" 
            height="24" 
            viewBox="0 0 24 24" 
            fill="none" 
            stroke="currentColor" 
            strokeWidth="2" 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            className="feather feather-log-out"
          >
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>
          </svg>
        </div>
      </div>
    </div>
  )
}

Now let's say we want to display the username in our Navbar, we don't have to do anything but reuse the useUser query again in the Navbar component. React query by default caches all queries for 5 mins(can be changed), after which the query is refetched. Here's how.



...
import useUser from "../../hooks/useUser"

export default function Navbar() {
  const { data, isLoading } = useUser({userId: user?.id})
  ...
      <div>
        {isLoading ? 
          <span>
            <Loader 
              height={30}
              width={30}
            />
          </span>
        : data?.username}
      </div>
    ...

A few things that react-query takes care for us here

We didn't have to add any logic to share the state, we can just use the data from the hook
We get, the state object in navbar as well which we use to display a loading indication incase the user is being fetched

No declaring of many initial states, and dispatching of actions. :3

Log out

Let's also add the log out logic in the navbar. You know the script, create a hook and use the hook.



import { useMutation, useQueryClient } from "react-query"
import supabase from "../app/supabase"


const logout = async () => {
  const { error } = await supabase.auth.signOut()

  if(error) {
    throw error
  }
}

export default function useLogOut() {
  const queryClient = useQueryClient()
  return useMutation(() => logout(), {
    onSuccess: () => {
      queryClient.removeQueries()
    }
  })
}

We use the supabase.auth.signOut which destroys the session and logs the user out.
A thing to notice here is since our app uses queries to display data and not any kind of store, we need to remove the queries once a user logs out. To do that we use the queryClient from the useQueryClient hook and on the success side effect we remove all the queries using queryClient.removeQueries method.



...
import useLogOut from "../../hooks/useLogOut";
import { useRouter } from "next/router";

...

export default function Navbar() {
  const logoutMutation = useLogOut()
  const router = useRouter()

  if(logoutMutation.isSuccess) {
    router.push('/auth/login')
  }

  ...

  <div
          className="cursor-pointer"
          onClick={() => logoutMutation.mutate()}
        >
          <svg 
            ...
          </svg>
        </div>

Done, clicking the logout button now destroys the session and redirects to the login page.

Searching for movies

We know the pattern now, let's create a hook for searching movies.
Create a file in hooks/useMovies.ts



import { useQuery } from 'react-query'

const searchMovies = async (query) => {
  const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.NEXT_PUBLIC_TMDB_API_KEY}&query=${query}&language=en-US&page=1`)

  if(!response.ok) {
    throw new Error('Error searching movies')
  }

  return response.json()
}

export default function useMovies({ query }) {
  return useQuery('movies', () => searchMovies(query), {
    enabled: false
  })
}

The enabled: false here means the query doesn't run automatically and has to be manually triggered using refetch. More here

Create a page called search.tsx



import Navbar from "../components/layouts/navbar"
import Search from "../components/search"
import ProtectedWrapper from "../components/Protected"

export default function Home() {
  return (
    <ProtectedWrapper>
      <div className="min-h-screen">
        <Navbar />
        <div className="container mx-auto">
          <Search />
        </div>
      </div>
    </ProtectedWrapper>
  )
}

And the Search component in components/search/index.tsx



import { useState } from 'react'
import useMovies from '../../hooks/useMovies'
import SearchResultItem from './SearchResultItem'
import Loader from '../ui/loader'

export default function Search() {
  const [query, setQuery] = useState('')
  const { refetch, isFetching, data, isSuccess, isIdle } = useMovies({query})
  return (
    <div className="mt-20 text-xl flex flex-col items-center">
      <div className="flex">
        <input 
          className="border shadow px-8 py-2 rounded focus:outline-none" 
          onChange={e => setQuery(e.target.value)}  
        />
        <button 
          className="bg-blue-500 py-2 px-4 shadow rounded text-white w-32"
          onClick={() => refetch()}
        >
          {
            isFetching ? 
            <span>
              <Loader 
                height={30}
                width={30}
              />
            </span>: 
            `Search`
          }
        </button>
      </div>
      <div className="mt-10">
        {isSuccess  && 
          <div className="grid place-items-center">
            {data
              ?.results
              .sort((a, b) => b.popularity - a.popularity)
              .map(
                (item, index) => 
                <SearchResultItem 
                  title={item.title} 
                  overview={item.overview} 
                  key={index}
                  poster_path={item.poster_path}
                  release_date={item.release_date}
                /> 
              )
            }
          </div>
        }
      </div>
        {isSuccess 
          && !data?.results.length
          &&   
          <div className="mt-10">
            <p>No results found</p>
          </div>
        }
      {isIdle && <div className="mt-10">Search for a movie</div>}
    </div>
  )
}

And the search item component



import dayjs from 'dayjs'

export default function SearchResultItem({title, overview, poster_path, release_date}) {
  return (
    <div className="flex w-2/3 mt-4 shadow rounded py-2">
      <div className="h-30 w-1/4 grid place-items-center flex-none">
       <img src={`https://www.themoviedb.org/t/p/w94_and_h141_bestv2${poster_path}`} alt="poster" height="150" width="150" />
      </div>
      <div className="px-4 flex flex-col justify-around">  
        <p className="text-2xl">{title}</p>
        <p className="text-base">{overview.slice(0, 200)}...</p>
        <p className="text-base">{dayjs(release_date).format('YYYY')}</p>
        <button className="w-20 px-6 py-2 text-base bg-blue-500 text-white rounded">Add</button>
      </div>
    </div>
  )
}

Now we can search for a movie and are displaying it in a list. One thing you will notice that even if you change pages and come back to the search page, the movie results if you had searched would have been cached and are shown. Woohoo.

Adding a movie to your recommendation

Let's create another hook for that.
In a file hooks/useAddMovie.ts



import { useMutation } from "react-query"
import supabase from "../app/supabase"

interface Movie {
  movie_id: number;
  title: string;
  overview: string;
  poster_path: string;
  release_date: string;
}

const addMovie = async (movie: Movie, user_id: string) => {
  const { error } = await supabase
  .from('movies')
  .upsert(movie)
    .single()

    if(error) {
      throw error
    }

    const { data, error: err } = await supabase
    .from('recommendations')
    .upsert({movie_id: movie.movie_id, user_id}, {
      onConflict: 'user_id, movie_id'
    })
    .single()

    if(err) {
      throw err
  }

  return data
}

export default function useAddMovie(movie: Movie) {
  const user = supabase.auth.user()
  return useMutation(() => addMovie(movie, user?.id))
}

Note that we are using upsert in both the calls, one to save the movie details so a duplicate movie isn't added and second to prevent a duplicate entry in recommendation(we have the onConflict clause to satisfy the unique index constraint). Also we are using supabase.auth.user() to pass in the user id, for the second method.

Then in components/search/SearchResultItem.tsx



...
imports
...

export default function SearchResultItem({id, title, overview, poster_path, release_date}) {
  const addMovie = useAddMovie({
      movie_id: id, 
      title, 
      overview, 
      poster_path, 
      release_date
    })

  ...

        <button 
          className="w-32 px-6 py-2 text-base bg-blue-500 text-white rounded"
          onClick={() => addMovie.mutate()}
        >
          {addMovie.isLoading ? 
            <span>
              <Loader 
                height={25}
                width={25}
              />
            </span>: 
            `Add`}
        </button>
 ...

Awesome now we can add a movie to our list. The last thing remaining is to display them in the home screen.

Displaying your recommendations

Create a file in hooks/useRecommendations.ts



import { useQuery } from 'react-query'
import supabase from '../app/supabase'

const fetchRecommendations = async (user_id) => {
  const { data, error } = await supabase
    .from('recommendation')
    .select(`
      movie (
        *
      )
    `)
    .eq('user_id', user_id)

  if(error) {
    throw new Error(error.message)
  }

  return data
}

export default function useRecommendations() {
  const user = supabase.auth.user()
  return useQuery('recommendations', () => fetchRecommendations(user?.id))
}

Here we are fetching from the foreign table movie using the movie id foreign key and matching by the user id.

Let's update our components/recommendations/index.tsx



import Link from 'next/link'
import useRecommendations from '../../hooks/useRecommendations'
import MovieCard from './MovieCard'
import Loader from '../ui/loader'

export default function Recommendations() {
  const { data, isSuccess, isLoading } = useRecommendations()
  if(isLoading) {
    return (
      <div className="h-screen grid place-items-center">
        <Loader height={200} width={200} />
      </div>
    )
  }
  return (
    <div>
      <h2 className="text-3xl my-4">Your recommendations</h2>
      <hr />
      {isSuccess && !data.length && <div className="mt-20 text-xl grid place-items-center">
        <p>You have no recommendations yet.</p>
        <p>
          <span className="cursor-pointer text-blue-500"><Link href="/search">Search</Link></span>
          <span>{` `}for movies and add them to your recommendations.</span>
        </p>
      </div>}
      {
        isSuccess &&
        <div className="grid grid-cols-3 gap-x-4 gap-y-4">
          {data.map(({movie: {
              movie_id, 
              title, 
              overview,
              poster_path,
              release_date
            } }) => (
            <MovieCard 
              key={movie_id}
              title={title}
              poster_path={poster_path}
            />
          ))}
        </div> 
      }
    </div>
  )
}

And components/recommendations/MovieCard.tsx



export default function MovieCard({title, poster_path}) {
  return (
    <div className="grid place-items-center shadow rounded py-4">
      <img src={`https://www.themoviedb.org/t/p/w300_and_h450_bestv2${poster_path}`} />
      <p className="mt-4 text-2xl font-semibold">{title}</p>
    </div>
  )
}

Perfect, now when we load the home page we have a loader when the query is fetched. If you go into search and add a movie, you will see the home page will have fetched that automatically. That's because when move to a different page, the recommendations query becomes inactive and is automatically fetched again on component mount. If you open devtools you will also notice that the useUser query is also being fetched multiple times(when we go to a new page)

Stale queries are refetched automatically in the background when:
New instances of the query mount
The window is refocused
The network is reconnected.
The query is optionally configured with a refetch interval.

This behaviour is good but sometimes undesirable. Gladly we can configure it in query default options.



const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      refetchOnMount: false,
      refetchOnWindowFocus: false
    }
  }
})

We can also add this individually to a query. Now that we have disabled auto fetch on remount, we want to refetch the query when we add a movie from search page.

For this we can again use the queryClient from the useQueryClient hook. Here we want to use the refetchQueries method. If the query is currently being used in the same page, you can use invalidateQueries method which makes the stale and are refetched automatically. Since our use case is for a different page we will use refetchQueries instead.

In our hooks/useAddMovie.ts file



...
export default function useAddMovie(movie: Movie) {
  const queryClient = useQueryClient()
  const user = supabase.auth.user()
  return useMutation(() => addMovie(movie, user?.id), {
    onSuccess: () => {
      queryClient.refetchQueries('recommendations')
    }
  })
}

Now when you add a movie, the query is refetched automatically.

The end result

React query has so many features, it's impossible to cover them all in a go. You can play around with react-query with an application, even better if you refactor an existing one to react-query.

The code until this point is on github

That's it for this part. In the next part we will build upon this app and add lists, which you can create and add your recommendations into and more features. We will delve more into supabase (row level policies etc), and more react query features.

Thanks for reading up to this point. If you have any questions or doubts feel free to ask them in the comments. If you liked the post like and share it on twitter.

Documentation links

NextJS - https://nextjs.org/docs/getting-started
React Query - https://react-query.tanstack.com/overview
Supabase Auth - https://supabase.io/docs/guides/auth
Supabase Client - https://supabase.io/docs/reference/javascript/supabase-client
Tailwind CSS - https://tailwindcss.com/docs

Adios Redux: using React hooks and Context effectively

Ankit Jena — Sun, 26 Apr 2020 06:16:49 +0000

It's 2020 and React is still the most popular frontend framework in the world. It's not just because it's relatively simpler. The fact that it keeps getting better is what has keeping me hooked (unintentional pun). The introduction of hooks changed the ecosystem from class based components to functions and made writing React way more fun. But there hasn't been a particular state management tool that is the go to option in React.

Redux is really popular. But a major source of complaint with Redux is how difficult it is learn at the beginning due to a lot of boilerplate. Recently I got to see some tweets

Tanner Linsley

@tannerlinsley

The impact React Query is having on some Redux users is mind boggling to me.

I'm seeing it more every day that someone starts integrating the two and ultimately ends up with such a small amount of redux state that they drop Redux altogether and put it in React context.

🤯

22:34 PM - 20 Apr 2020

This led me to go an learning spree and I got to know some exciting patterns and packages which might completely change how you view hooks and global state in general(it did for me).

When I first thought I would write this article series I had way too many options for a title. There was State Management 2020, Custom Hooks in React, and a few others. But finally I decided to go with Ciao Redux(Goodbye Redux), since that seemed like the end goal for this article series.

This article is inspired by this great talk from Tanner Linsley at JSConf Hawaii 2020. I recommend you to watch it if you haven't already.

So let's get started.

How do you see State in React?

One would simply say, State is all the data present in frontend or it's what you fetch from the server. But when you have used React for building applications for a few time now, you would understand the point I'm going to make.

Kent C. Dodds 🧑‍🚀

@kentcdodds

@jhooks All apps have two types of state: UI State and Server Cache. Put all your server cache in react-query and the rest of your state is pretty simply managed within React state/context.

04:57 AM - 22 Apr 2020

State can be majorly divided into 2 types:

UI State
Server Cache

You maybe wondering WTH I'm talking about. Let me explain.

UI State is the state or information for managing your UI. For example, Dark/Light theme, toggle a dropdown, manage some error state in forms. Server Cache is the data you receive from the server like a user details, list of products etc.

Managing State

Lets start with basics. And build something for example's sake while we are at it. No, not a todo list. We have enough tutorials for that already. We are gonna build a simple application with a login screen and a home screen.

useState

The useState hook allows us to use state inside a functional component. So bye bye all the hassles of declaring state in constructor, accessing it through this. One can simply do

import { useState } from 'react'

const [name, setName] = useState("")

and we get name variable and a function to update the variable as setName.

Now let's use this knowledge to make a login form for our page.

import React, { useState } from 'react'

export default function Login() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [emailError, setEmailError] = useState(false)
  const [passwordError, setPasswordError] = useState(false)
    const [isLoading, setIsLoading] = useState(false)

    async function handleSubmit() {
        setIsLoading(true)
        const res = await axios.post(url, {email, password})
        if(res.data.status === "EMAIL_ERROR") {
      setEmailError(true)
    }
    if(res.data.status === "PASSWORD_ERROR") {
      setPasswordError(true)
    }
    // Otherwise do stuff
    }
    return (
        <div>
            <input 
                type="text"
                value={email} 
                onChange={
                    e => setEmail(e.target.value)
                } 
            />
            {emailError && <ErrorComponent type="EMAIL_ERROR" />}
            <input 
                type="password" 
                value={password}
                onChange={
                    e => setPassword(e.target.value)
                } 
            />
            {passwordError && <ErrorComponent type="PASSWORD_ERROR" />}
            { isLoading
            ? <button onClick={() => handleSubmit()}>Sign in</button>
            : <LoadingButton /> }
        </div>
    )
}

This works. But this must not be the best way is it. And this can pretty easily go out of hand with addition of few other factors or validation checks for example.

useReducer

People familiar with Redux must know useReducer works just like Redux does. For those who don't here's how it works.

Action -------> Dispatch -------> Reducer --------> Store

You create an action and dispatch it which goes through the reducer and updates the store. Let's implement it in the previous example and see how it works.

import React, { useReducer } from 'react'

const initialState = {
  user: {
    email: "",
    password: ""
  },
  errors: {
    email: false,
    password: false
  },
    isLoading: false
}

const reducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_VALUE':
      return {
        ...state,
        user: {
          ...state.user,
          [action.field]: action.data
        }
      }
    case 'ERROR':
      return {
        ...state,
        errors: {
          ...state.errors,
          [action.type]: true
        }
      }
    case 'LOADING':
      return {
    ...state,
    isLoading: true
      }
    default:
      return state
  }
} 

export default function Login() {
  const [state, dispatch] = useReducer(reducer, initialState)

  async function handleSubmit() {
        dispatch({type: 'LOADING'})
        const res = await axios.post(url, store.user)
        if(res.data.status === "EMAIL_ERROR") {
      dispatch({type: 'ERROR', field: "email"})
    }
    if(res.data.status === "PASSWORD_ERROR") {
      dispatch({type: 'ERROR', field: "password"})
    }
    // Otherwise do stuff
    }

    return (
        <div>
            <input 
                type="text"
                value={state.user.email} 
                onChange={
                    e => dispatch({type: "CHANGE_VALUE", data: e.target.value, field: "email"})
                } 
            />
            {state.errors.email && <ErrorComponent type="EMAIL_ERROR" />}
            <input 
                type="password" 
                onChange={
                                        value={state.user.password}
                    e => dispatch({type: "CHANGE_VALUE", data: e.target.value, field: "password"})
                } 
            />
            {state.errors.password && <ErrorComponent type="PASSWORD_ERROR" />}
            <button onClick={() => handleSubmit()}>Sign in</button>
        </div>
    )
}

This looks good, we don't deal with separate functions, we declare one reducer and define some actions and corresponding store changes. This is quite helpful because while using useState , we can easily lose track of the number of variables as our requirement grows. You must have a noticed this is much longer than the previous code, which takes us to the next section.

Abstracting logic from UI

While developing an application in react you should always try to keep your business logic away from your UI code. The UI component, which interacts with the user should only know what interactions the user can do(actions). Plus this provides proper structure as well good maintainability to your codebase. This was well supported by redux in which we can define our actions elsewhere which would take care of all the logic, keeping our UI code clean. But how do we achieve that with hooks. Custom hooks to the rescue!

Custom Hooks

React allows you to create your own custom hooks for better separation and sharing of logic across components. For the above example, we can create a file called hooks/useLoginReducer.js

import { useReducer } from 'react'

const initialState = {
  user: {
    email: "",
    password: ""
  },
  errors: {
    email: false,
    password: false
  },
    isLoading: false
}

const reducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_VALUE':
      return {
        ...state,
        user: {
          ...state.user,
          [action.field]: action.data
        }
      }
    case 'ERROR':
      return {
        ...state,
        errors: {
          ...state.errors,
          [action.type]: true
        }
      }
    case 'LOADING':
      return {
    ...state,
    isLoading: true
      }
    default:
      return state
  }
} 

export default function useLoginReducer() {
  const [store, dispatch] = useReducer(reducer, initialState)
  return [store, dispatch]
}

Then in the Login component

import React from 'react'
import useLoginReducer from '../hooks/useLoginReducer'

export default function Login() {
  const [store, dispatch] = useLoginReducer()
    ...
}

Voila! We separated the logic from the component and it looks so much cleaner now. Custom hooks can be used as such to a great effect for separation of concerns.

Let's go ahead to the best part.

Global State

Managing global state is what 3rd party libraries like Redux aim to provide, because prop drilling is hell. React has Context API, which allows to pass data between components. Context allows you declare a Provider which stores or initialises the data and Consumer which can read or update the data. It is used by Redux in the background, but

it was unstable for a lot of time
needed render props which led to less readability

With the introduction of React hooks however, using context became a lot more easier. One can easily declare a global state and use them by combining hooks and context. Let's take a look at an example we used above. Suppose after login you want update the global store with user's details which can be used in a Navbar component to display the user's name.

We declare a context first and use hooks to store and update data.

const globalContext = React.createContext()

const intialState = {
    user: {
        ...
    }
}

const reducer = {
    ...
}

export const StoreProvider = ({children}) => {
  const [store, dispatch] = React.useReducer(reducer, initialState)

    //memoizes the contextValue so only rerenders if store or dispatch change
    const contextValue = React.useMemo(
        () => [store, dispatch],
        [store, dispatch]
    )

  return (
    <globalContext.Provider value={contextValue}>
      {children}
    </globalContext.Provider>
  )
}

export function useStore() {
  return React.useContext(globalContext)
}

So let me explain through the code here. We first create a context. Then we are using useReducer inside a component to create the store and dispatch method. We are using useMemo to create a context variable to update only when one of it's dependencies change. Then we are returning the context.Provider component with value as the context variable. In the last part we are using the useContext hook which simply allows us to use the context inside a functional component provided it lies inside the Provider.

// App.js
import React from 'react';
import { StoreProvider, useStore } from './context';

function App() {
  return (
    <StoreProvider>
      <Navbar />
      ...
    </StoreProvider>
  );
}

// Login.js
import React from 'react';
import { useStore } from './context'

function Login() {
    const [, dispatch] = useStore()
    ...
    function handleSubmit() {
        ...
        dispatch(...)
    }
}

// Navbar.js
import React from 'react';
import { useStore } from './context';

function Navbar() {
    const [{user}, dispatch] = useStore()
    return (
        ...
        <li>{user.name}</li>
    )
}

So we wrap the app component in the StoreProvider and use the useStore function we returned to access the store value and dispatch function at a nested component. Sounds awesome right. Umm not so much. There are a lot of issues in this. Let's take a look.

Firstly, since we are exporting both store and dispatch. Any component which updates the component (uses dispatch only) and doesn't use the store will also rerender everytime the state changes. This is because a new data object is formed everytime context value changes. This is undesirable.
Secondly, we are using a single store for all our components. When we would add any other state to the reducer initialState, things will grow a lot. Plus every component that consumes the context will rerender everytime the state changes. This is undesirable and can break your application.

So what can we do to solve these. A few days I came across this tweet thread

Andrew Jones

@ajones_codes

@tannerlinsley @kentcdodds Most projects don’t need Redux if they use React Context correctly

So many problems b/c people try to put all their state in one context

If you break them up by concern instead, use useReducer, separate get/set contexts as needed, useMemo as needed -> React Context is golden

14:47 PM - 21 Apr 2020

Tanner Linsley

@tannerlinsley

@dibfirman 1. Context + useState
2. Context + useReducer
3. DispatchContext + StateContext + useReducer
4. Multiple Providers of #3 for state "slices"

At any stage: Profile for slow renders, then useMemo

With those 4 stages and useMemo, I believe you can solve 99% of perf challenges.

22:58 PM - 20 Apr 2020

Problem solved. This is what we needed. Now's let's implement that and I'll explain it along with.

For the first problem, we can simply separate the store and dispatch into to different contexts DispatchContext for updating the store and StoreContext for using the store.

const storeContext = React.createContext()
const dispatchContext = React.createContext()

const intialState = {
    user: {
        ...
    }
}

const reducer = {
    ...
}

export const StoreProvider = ({children}) => {
  const [store, dispatch] = React.useReducer(reducer, initialState)

  return (
    <dispatchContext.Provider value={dispatch}>
      <storeContext.Provider value={store}>
        {children}
      </storeContext.Provider>
    </dispatchContext.Provider>
  )
}

export function useStore() {
  return React.useContext(storeContext)
}

export function useDispatch() {
    return React.useContext(dispatchContext)
}

Then simply we can only import useDispatch or useStore according to our case.

// App.js
import React from 'react';
import { StoreProvider } from './context';

function App() {
  return (
    <StoreProvider>
      <Navbar />
      ...
    </StoreProvider>
  );
}

//Login.js
import React from 'react';
import { useDispatch } from './context'

function Login() {
    const dispatch = useDispatch()
    ...
    function handleSubmit() {
        ...
        dispatch(...)
    }
}

// Navbar.js
import React from 'react';
import { useStore } from './context'

function Navbar() {
    const {user} = useStore()
    return (
        ...
        <li>{user.name}</li>
    )
}

Now moving on to the second problem. It's really simple, we don't need to create a single store. I had difficulty using context previously primarily due to this reason only. Even in Redux, we separate reducers and combine them.

We can simply define a function which takes in initialState and reducer and returns a store. Let's see how it's done.

import React from 'react'

export default function makeStore(reducer, initialState) {
  const storeContext = React.createContext()
  const dispatchContext = React.createContext()

  const StoreProvider = ({children}) => {
    const [store, dispatch] = React.useReducer(reducer, initialState)

    return (
      <dispatchContext.Provider value={dispatch}>
        <storeContext.Provider value={store}>
          {children}
        </storeContext.Provider>
      </dispatchContext.Provider>
    )
  }

  function useStore() {
    return React.useContext(storeContext)
  }

  function useDispatch() {
    return React.useContext(dispatchContext)
  }

  return [StoreProvider, useStore, useDispatch]
}

Then we can declare our userContext as follows.

import makeStore from '../store'

const initalState = {
  user: {
        ...
    }
}

const reducer = (state, action) => {
  switch (action.type) {
    ...
        ...
  }
}

const [
  UserProvider,
  useUserStore,
  useUserDispatch
] = makeStore(reducer, initalState)

export { UserProvider, useUserStore, useUserDispatch }

And finally use it when we need

// App.js
import React from 'react';
import { UserProvider } from './userStoreContext';

function App() {
  return (
    <UserProvider>
      <Navbar />
      ...
    </UserProvider>
  );
}

// Login.js
import React from 'react';
import { useUserDispatch } from './userStoreContext'

function Login() {
    const dispatch = useUserDispatch()
    ...
    function handleSubmit() {
        ...
        dispatch(...)
    }
}

// Navbar.js
import React from 'react';
import { useUserStore } from './userStoreContext'

function Navbar() {
  const {user} = useUserStore()
  return (
    ...
    <li>{user.name}</li>
  )
}

Done. If we want another store we can simply make another store and wrap it around our app or the components where you want to use it. For example

function App() {
  return (
    <UserProvider>
        <Navbar />
        <ProductProvider>
            <Products />
        </ProductProvider>
    </UserProvider>
  );
}

Whooh. This was it for the first part of the series. Hope you have learned how to use hooks and context effectively. In the next articles I'm going to talk about react-queryand how to deal with server cache. Stay tuned.

Interview with Aerogear for Google Summer of Code

Ankit Jena — Thu, 08 Aug 2019 08:34:20 +0000

It's been more than 2 months working on Graphback, a tool to help developers build GraphQL servers easily. It's been an awesome experience the entire time starting from the community bonding period to now. And I am sure the last month will be great as well.

Recently, I had an interview with my organization sharing my experience. Here goes the transcript.

Can you tell us a little bit about yourself?
I am Ankit Jena, currently pursuing my undergrad in Computer Science, from CET Bhubaneswar. I have been working part-time and freelancing as a full stack developer for a year now.

What do you like to do in free time?
I like to watch movies or play games in my free time if I am not usually hanging out with my friends. Else I also love reading about innovations in technology.

Can you tell us about your GSOC project?
Graphback is a project that targets to help developers to build backend applications by using data models defined in GraphQL specification. It allows a developer to bootstrap a GraphQL server with a single command, selecting from many of the available templates and extensions. It generates a completely customizable server and allows the user to manage the database of their choice based on the user’s data model. It allows users to focus more on delivering business value.

What was the reason for choosing this topic?
When I was learning GraphQL from various tutorials, setting up the project had a very high entry barrier. When this idea came up, I instantly liked it in my mind because I had faced the same problem and thought this could help people.

How is your project aiding AeroGear community?
The project will allow developers at aerogear to quickly bootstrap a GraphQL server according to their use cases and focus more on providing implementation specific to their business including server, web and mobile clients.

What was the most challenging element of your project?
The most challenging element of the project was initially deciding the correct approach for building the core of the project. I did extensive research over the weeks and decided on the approach that happened to be successful afterward.

Any funny, exciting or surprising moments of your GSOC?
Something which really excited me was when we released Graphback’s first working version and we got reviews flowing in from developers requesting features. That was really exciting for me as this was my first open-source project and the reviews were positive.

A surprising moment would be, I had made a PR, and my mentor asked me for changes. I made all of them and when I woke up in the morning, my mentor had said that it was one of the best PR he had ever seen. That was really surprising and I was happy that I had improved over time.

Did you have any problems or obstacles when doing this project?
In the community bonding period, my state was hit by a severe cyclonic storm (“Fani”) which caused a lot of damage. So there were a lot of power surges during the restoration works which halted the initial progress. Also, my exams were rescheduled because of this into the coding period of GSoC.

During the second month, my laptop’s motherboard short-circuited and had to borrow my friend’s laptop and work in it for almost 20 days.

Do you plan to be involved in Red Hat/AeroGear projects after GSOC?
Yes, I would love to keep contributing to Graphback and other Red Hat/Aerogear projects if I get a chance to.

Using GraphQL Visitor Pattern

Ankit Jena — Fri, 12 Jul 2019 02:26:15 +0000

GraphQL is a amazing technology which is being adapted more and more. As part of my work for JBoss community in GSoC'19 I have been working on Graphback. For the needs of the project we had to extract information from a schema (SDL syntax) into a nice object we can use. For example, convert this

type User{
  username: String!
  email: String
}

to something like

{
  name: "User",
  fields: [
    {
      name: "username",
      type: "String",
      isNull: false
    },
    {
      name: "email",
      type: "String",
      isNull: true
    }
  ]
}

When schema is read by GraphQL it doesn't store it as a string, it does a lot of parsing to convert it into an AST(will talk more about it).

The best way to do this is using Visitor pattern. In this blog post I'm going to explain how GraphQL converts schema to ASTs and using Visitor Pattern.

Abstract Syntax Tree(AST)

When a GraphQL server receives a query to process it generally comes in as a String. This string must be tokenized and parsed into a representation that the machine understands. This representation is called an abstract syntax tree.

A great tool to inspect abstract syntax trees is AST Explorer. The site lets you quickly paste code from JavaScript to PHP to TypeScript and even GraphQL types into the UI and then provides the resulting abstract syntax tree. For the above example, the AST is

{
  "kind": "Document",
  "definitions": [
    {
      "kind": "ObjectTypeDefinition",
      "name": {
        "kind": "Name",
        "value": "User",
        "loc": {
          "start": 133,
          "end": 137
        }
      },
      "interfaces": [],
      "directives": [],
      "fields": [
        {
          "kind": "FieldDefinition",
          "name": {
            "kind": "Name",
            "value": "username",
            "loc": {
              "start": 141,
              "end": 149
            }
          },
          "arguments": [],
          "type": {
            "kind": "NonNullType",
            "type": {
              "kind": "NamedType",
              "name": {
                "kind": "Name",
                "value": "String",
                "loc": {
                  "start": 151,
                  "end": 157
                }
              },
              "loc": {
                "start": 151,
                "end": 157
              }
            },
            "loc": {
              "start": 151,
              "end": 158
            }
          },
          "directives": [],
          "loc": {
            "start": 141,
            "end": 158
          }
        },
        {
          "kind": "FieldDefinition",
          "name": {
            "kind": "Name",
            "value": "email",
            "loc": {
              "start": 162,
              "end": 167
            }
          },
          "arguments": [],
          "type": {
            "kind": "NamedType",
            "name": {
              "kind": "Name",
              "value": "String",
              "loc": {
                "start": 169,
                "end": 175
              }
            },
            "loc": {
              "start": 169,
              "end": 175
            }
          },
          "directives": [],
          "loc": {
            "start": 162,
            "end": 175
          }
        }
      ],
      "loc": {
        "start": 128,
        "end": 177
      }
    }
  ],
  "loc": {
    "start": 0,
    "end": 178
  }
}

The AST includes a lot of metadata, such as location in the source, or identifiers, such as argument names; and thanks to this deeply-nested JSON object, we now have all the power we need to work with GraphQL schemas.

Visitor Pattern

visit() will walk through an AST using a depth first traversal, calling the visitor's enter function at each node in the traversal, and calling the leave function after visiting that node and all of its child nodes.

By returning different values from the enter and leave functions, the behavior of the visitor can be altered, including skipping over a sub-tree of the AST (by returning false), editing the AST by returning a value or null to remove the value, or to stop the whole traversal by returning BREAK.

– GraphQL Documentation

Visit function does a depth first traversal and it calls the enter function each time it encounters and node and leave function after a node's traversal. When we return a value from a node in the leave function the node is changed to a return value.

Plus we can visit specific nodes we want using Named visitors.

visit(ast, {
  leave: {
    Kind(node) {
      // leave the "Kind" node
    }
  }
})

That's all we need for parsing the AST. Let's write the code.

For this case, we get to see a few kind of nodes, ObjectTypeDefinition, FieldDefinition, NotNullType, NamedType and Name. Let's go through them in order from smaller nodes to larger ones to write our visitor.

const visitor = {
  Name: (node) => {
    return node.value
  },
  NamedType: (node) => {
    return {
      "type": node.name,  //returns the value
      "isNull": true
    }
  },
  NonNullType: (node) => {
    return {
      //spread returned object from NamedType
      ...node.type,     
      "isNull": false
    }
  },
  FieldDefinition: (node) => {
    return {
      //spread returned object from NamedType or NotNullType
      ...node.type,     
      "name": node.name
    }
  },
  ObjectTypeDefinition: (node) => {
    return {
      "name": node.name,
      "fields": node.fields
    }
  }
}

When we user this in the leave function of visitor. We get our required output in the definitions field of the result.

Now to actually do the visit and get the result.

const ast = parse(schemaText)
const result = visit(ast, { leave: visitor })

Visitor pattern is really helpful as you can adept it to your use cases. This is one of the few great tools within GraphQL. Hope this helps.

References

1 - https://graphql.org/graphql-js/language/#visitor
2 - https://graphql-code-generator.com/docs/custom-codegen/using-visitor

Altair GraphQL Client - An awesome new GraphQL IDE

Ankit Jena — Wed, 13 Mar 2019 19:31:53 +0000

GraphQL has been up and coming as an alternative to the classical REST architecture and it's been gaining a lot of popularity among the developer community. In GraphQL development, you cannot use typical clients like postman and instead GraphQL IDEs are used which make a developer's life easier by allowing them to develop faster. But our choice is limited as very few of them can be integrated directly in our application for an in-browser experience.

Altair GraphQL Client is one such which has been gaining popularity in the developer community and all for the right reasons. It has all the features like the much popular Prisma GraphQL Playground and more. In this post, I'm going to cover some of the key features of the Altair GraphQL Client.

Documentation and addition of queries directly

You can view your GraphQL schema in the docs in a nicely displayed manner with information about queries, mutations, types, arguments and description provided. You can search through the documentation. However the ability to add queries on a single click is an unique and really useful feature.

Headers, Variables and History of requests

You can set headers and add variables to your requests. You can also checkout your previously made requests in history(with an option to clear them too).

GraphQL subscriptions

You can test your GraphQL subscriptions without any worry. Just provide the subscription URL and start the subscription, and you would get each message as they are sent once you're subscribed.

Import and Export window state

You can export your current window state with all the queries, variables or headers and can import it or another .agq file.

Change language and appearance

You can change your language - translations are provided. Currently available languages include English, Spanish, French, Italic, Russian among others. You can switch your client's theme between light and dark. Keyboard shortcuts are also available in settings.

Some other features include:

Autocompletion - You get an autocomplete list of valid terms you can use as you type out your query in the editor.
Prettify query - You can format the query in the editor in a properly indented manner for easier reading.
Compress query - You can compress the query to a minified form, removing any unnecessary whitespace and comments.
Convert to cURL request - Convert your GraphQL request to cURL request which you can use elsewhere.
Response Stats - You can easily know how long your query takes with the response stats information displayed for each request you make.
Syntax and error highlighting - The syntax and your errors of code are highlighted as you type your query.
Multiple windows - You are not limited to only one window at a time but you can have multiple windows open to work with multiple different queries at the same time.

With many features being added by contributors around the globe, Altair is developing rapidly towards becoming the go to option for the GraphQL community. From my point of view Altair solves all major use cases that GraphQL developers face and I would recommend it to anyone.