codeSnippet.jsx

// this query filters a table using a search term and when the search term changes it keeps the old data until the new data arrives
const {
  data: groups,
  isLoading,
  error,
} = useQuery({
  queryKey: ["groups", searchTerm],
  queryFn: () => getAllGroups(searchTerm, supabase),
  staleTime: 10000,
  placeholderData: (prev) => prev,
});

// ****************************************************************************************

// supabase with clerk Hook

import "react-native-url-polyfill/auto";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@supabase/supabase-js";
import { useAuth, useSession, useUser } from "@clerk/clerk-expo";

const supabaseUrl = "https://arhodpdnrjyzvfuaudtm.supabase.co";
const supabaseAnonKey =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFyaG9kcGRucmp5enZmdWF1ZHRtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTYzMjQ2MzAsImV4cCI6MjA3MTkwMDYzMH0.pUMNdmn7Xcb8HnCoOa_Z9djcO8T-E0-CIdLDvrhqBvA";

export const useSupabase = () => {
  const { getToken } = useAuth();

  return createClient(supabaseUrl, supabaseAnonKey, {
    accessToken: async () => getToken() ?? null,
  });
};

// ****************************************************************************************

// make a flatlist/flashlist freshable

const { data, error, isLoading, refetch, isFetching } = useQuery({
  queryKey: ["posts"],
  queryFn: () => getAllPosts(supabase),
});
<FlashList
  data={posts}
  onRefresh={refetch}
  refreshing={isFetching}
  renderItem={({ item }) => <PostItem post={item} />}
  ItemSeparatorComponent={() => <View style={{ marginTop: -70 }} />}
/>;

// ****************************************************************************************
// useQuery tanstack
// ****************************************************************************************

//  mutation with invalidation
const queryClient = useQueryClient();

const {
  mutate: addPost,
  data,
  error,
} = useMutation({
  mutationFn: () => {
    if (!postTitle) throw new Error("please fill the title");
    if (!currentGroup) throw new Error("please select a subreddit");
    return addNewPost(supabase, postTitle, postBody, user?.id, currentGroup.id);
  },
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["posts"] });
    router.back();
  },
  onError: (error) => {
    Alert.alert("Failed to insert post", error.message);
  },
});