Unable to revalidate cache
Maris1984 opened this issue · comments
Maris1984 commented
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?
Maris1984 commented
QueryClientProvider wrapper had to be applied to the upper component.