SupabaseJS v2 Typescript

I am attempting to create a React Query provider that wraps the Supabase v2 JS client. I love the type improvements of the new version of the Supabase client so I definitely want to keep them in tact. However, by wrapping the client query in a react query function, I am having trouble typing how the return types of the client, or getting the client types inferred. Basically I am just looking to have this function use the same types as the client.

The types in the v2 JS are a bit complex for me to try to duplicate as the return type of this function, so I wanted to see if anyone had any suggestions on how I may get this done.

useReactQuery

useReactQuery

does take a generic which will be the return type of the fetched data. However, I'm a bit lost on what that return type should be as a lot of it looks like its inferred from the table name in the standalone v2 client.

type GeneratedQuery = PostgrestFilterBuilder<any, any> & { _table?: string };
type QueryCreator = (supabase: SupabaseClient<Database>) => PostgrestFilterBuilder<any, any> & { _table?: string };

  function useQuery(queryCreator: QueryCreator, options?: UseQueryOptions & { queryKey?: string | unknown[] }) {
    const query = queryCreator(client);

    const execute = (query: GeneratedQuery) =>
      new Promise<any>(async (resolve, reject) => {
        const { data, error } = await query;
        if (data) {
          resolve(data);
        } else {
          reject(error);
        }
      });

    return useReactQuery(options?.queryKey ?? [query._table], () => execute(query), options);
  }

type GeneratedQuery = PostgrestFilterBuilder<any, any> & { _table?: string };
type QueryCreator = (supabase: SupabaseClient<Database>) => PostgrestFilterBuilder<any, any> & { _table?: string };

  function useQuery(queryCreator: QueryCreator, options?: UseQueryOptions & { queryKey?: string | unknown[] }) {
    const query = queryCreator(client);

    const execute = (query: GeneratedQuery) =>
      new Promise<any>(async (resolve, reject) => {
        const { data, error } = await query;
        if (data) {
          resolve(data);
        } else {
          reject(error);
        }
      });

    return useReactQuery(options?.queryKey ?? [query._table], () => execute(query), options);
  }

When I call

useQuery

useQuery

in a component (eg) Id like the return type of the client query to go to

categories

categories

  const categories = useQuery((supabase) => supabase.from("categories" *this table name autocompleted fine).select("name, id"));

  categories.{no types on the return value of categories :/}

  const categories = useQuery((supabase) => supabase.from("categories" *this table name autocompleted fine).select("name, id"));

  categories.{no types on the return value of categories :/}

This has sort of stretched my knowledge of Typescript thin and any help is appreciated!

SupabaseJS v2 Typescript

useReactQuery

useReactQuery

type GeneratedQuery = PostgrestFilterBuilder<any, any> & { _table?: string };
type QueryCreator = (supabase: SupabaseClient<Database>) => PostgrestFilterBuilder<any, any> & { _table?: string };

  function useQuery(queryCreator: QueryCreator, options?: UseQueryOptions & { queryKey?: string | unknown[] }) {
    const query = queryCreator(client);

    const execute = (query: GeneratedQuery) =>
      new Promise<any>(async (resolve, reject) => {
        const { data, error } = await query;
        if (data) {
          resolve(data);
        } else {
          reject(error);
        }
      });

    return useReactQuery(options?.queryKey ?? [query._table], () => execute(query), options);
  }

type GeneratedQuery = PostgrestFilterBuilder<any, any> & { _table?: string };
type QueryCreator = (supabase: SupabaseClient<Database>) => PostgrestFilterBuilder<any, any> & { _table?: string };

  function useQuery(queryCreator: QueryCreator, options?: UseQueryOptions & { queryKey?: string | unknown[] }) {
    const query = queryCreator(client);

    const execute = (query: GeneratedQuery) =>
      new Promise<any>(async (resolve, reject) => {
        const { data, error } = await query;
        if (data) {
          resolve(data);
        } else {
          reject(error);
        }
      });

    return useReactQuery(options?.queryKey ?? [query._table], () => execute(query), options);
  }

When I call

useQuery

useQuery

in a component (eg) Id like the return type of the client query to go to

categories

categories

  const categories = useQuery((supabase) => supabase.from("categories" *this table name autocompleted fine).select("name, id"));

  categories.{no types on the return value of categories :/}

  const categories = useQuery((supabase) => supabase.from("categories" *this table name autocompleted fine).select("name, id"));

  categories.{no types on the return value of categories :/}

This has sort of stretched my knowledge of Typescript thin and any help is appreciated!

SupabaseJS v2 Typescript

SupabaseJS v2 Typescript

Similar Threads

Similar Threads

Similar Threads