psteinroe / supabase-cache-helpers

A collection of framework specific Cache utilities for working with Supabase.

Home Page:https://supabase-cache-helpers.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unable to revalidate cache

Maris1984 opened this issue · comments

I have the following component which queries one particular entry and also renders a form to update the same entry.
I'm for some reason unable to invalidate the cache and every time I update the entry, the list does not get refreshed.
As per documentation, cache should get revalidated automatically without any additional parameters, however I do see the updated value after refreshing the page.

import React from "react";
import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
import useSupabase from "../../hooks/use-supabase";
import { useUpdateMutation } from "@supabase-cache-helpers/postgrest-react-query";

const NewCustomers = () => {
  const client = useSupabase();

  const { data} = useQuery(
    client
      .from("Customers")
      .select("id,created_at,Name")
      .eq("id", 1),
  );

  const { mutateAsync: update } = useUpdateMutation(
    client.from("Customers"),
    ["id"],
    "id,created_at,Name",
    {
      onSuccess: (data) => console.log("Success!", data),
    }
  );

  const onSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const name = formData.get("name");
    await update({ id: 1, Name: name });
  };

  return (
    <div>
        <ul>
          {data.map((customer) => (
            <li key={customer.Name}>{customer.Name}</li>
          ))}
        </ul>
        <form onSubmit={onSubmit}>
          <input type="text" name="name"></input>
          <button type="submiot">Create</button>
        </form>
    </div>
  );
};

export default NewCustomers;

The App component:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import NewCustomers from "./Components/Customers/New";

function App() {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      <NewCustomers />
    </QueryClientProvider>
  );
}

export default App;

Am I missing anything here?

QueryClientProvider wrapper had to be applied to the upper component.