Using React Query with Next.js Supabase

React Query is the best React library for managing asynchronous data fetching in your applications. Learn how to use it with Next.js Supabase.

Makerkit uses React Query for client-side data fetching. This allows you to fetch data from your Supabase database and display it on the client-side using an ergonomic API.

NB: since we use React Hooks, you need to use the use client directive at the top of your component. If you use this code inside a page, please write a separate component (with use client) and import it in your page.

'use client';
import { useQuery } from '@tanstack/react-query';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
function TasksList(accountId: string) {
  const client = useSupabase();
  const { data, isLoading, error } = useQuery({
    queryKey: ['tasks', accountId],
    queryFn: async () => {
      const { data, error } = await client
        .from('tasks')
        .select('*')
        .eq('account_id', accountId)
        .order('created_at', { ascending: false });
      if (error) {
        throw error;
      }
      return data;
    }
  });
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error loading tasks</div>;
  }
  return (
    <ul>
      {data.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

By leveraging the useSupabase hook, you can access the Supabase DB data right from your React components.

Similarly, you can use React Query for mutations:

import { useMutation } from '@tanstack/react-query';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
function CreateTaskForm() {
  const client = useSupabase();
  const mutation = useMutation({
    mutationFn: async (data) => {
      const { data, error } = await client
        .from('tasks')
        .insert({
          title: data.title,
          description: data.description,
          account_id: data.accountId,
        })
        .select('*')
        .single();
      if (error) {
        throw error;
      }
      return data;
    },
  });
  const handleSubmit = async (data) => {
    const { data, error } = await mutation.mutateAsync(data);
    if (error) {
      console.error(error);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Create Task</button>
    </form>
  );
}