[Question]: Does this work with a self hosted postgrest server (no supabase account)?

[zacharyhansen]

Apologies if this is the incorrect place to ask.

I have a simple example component and DB spun up using a self hosted postgrest server where I am trying to test out the auto cache update functionality for an insert and update mutation however I cannot seem to get it working.

Would it be expected the following example works? Or is it required I have a supabase project and connect to that?

Postgest Client

import { PostgrestClient } from "@supabase/postgrest-js";
import { NewOTask, OTask, OTaskUpdate } from "odigos-types";

interface Database {
  public: {
    Tables: {
      o_task: {
        Row: OTask;
        Insert: NewOTask;
        Update: Partial<OTask>;
      };
      // ... other tables
    };
    Views: {
      // ... any views you have
    };
    Functions: {
      // ... any functions you have
    };
  };
  ["tenant_base_org"]: {
    Tables: {
      o_task: {
        Row: OTask;
        Insert: NewOTask;
        Update: Partial<OTask>;
      };
      // ... other tables
    };
    Views: {
      // ... any views you have
    };
    Functions: {
      // ... any functions you have
    };
  };
  // ... other schemas if you have any
}

const postgrest = new PostgrestClient<Database>(
  process.env.NEXT_PUBLIC_REST_URL!
);

export default postgrest;

Simple component (clicking the button does not update the table or the rendered list of titles)

"use client";

import {
  useInsertMutation,
  useQuery,
  useUpdateMutation,
} from "@supabase-cache-helpers/postgrest-swr";
import {
  ODealId,
  OTaskId,
  TaskPriority,
  TaskStatus,
  UserId,
} from "odigos-types";
import { useSWRConfig } from "swr";
import { Alert } from "ui";

import postgrest from "backend/postgrest";
import { ClientAgGrid } from "modules/ClientAgGrid";

export default function Page() {
  const { cache } = useSWRConfig();
  const { data, error, isLoading } = useQuery(
    postgrest.schema("tenant_base_org").from("o_task").select("*")
  );

  const { trigger: update } = useUpdateMutation(
    postgrest.schema("tenant_base_org").from("o_task"),
    ["id"],
    "title",
    {
      onError: (res) => console.log("onError!", { res }),
      onSuccess: (res) => console.log("Success!", { res }),
    }
  );

  const { trigger: insert } = useInsertMutation(
    postgrest.schema("tenant_base_org").from("o_task"),
    ["id"],
    "title",
    {
      onError: (res) => console.log("onError!", { res }),
      onSuccess: (res) => console.log("Success!", { res }),
    }
  );

  const change = () => {
    insert([
      {
        assignee_id: "28256bc7-0222-4dea-9fa1-2e78929e5671" as UserId,
        deal_id: "74738208-3058-49d6-b55b-9ee448c08923" as ODealId,
        priority: TaskPriority["no priority"],
        status: TaskStatus["todo"],
        title: "test insert",
      },
    ]);
    update(
      {
        id: "95d4577b-0c01-4482-99cc-cb45708b0e08" as OTaskId,
        title: "test6",
      },
      {
        optimisticData: {
          title: "test6",
        },
      }
    );
  };

  console.log({ cache });

  if (error) {
    return <Alert>There was an error showing you task information </Alert>;
  }

  return (
    // wrapping container with theme & size
    <div
      className="ag-theme-quartz" // applying the Data Grid theme
      style={{ height: 700 }} // the Data Grid will fill the size of the parent container
    >
      <button onClick={change}>click</button>
      {JSON.stringify(data?.map((d) => d.title))}
      <ClientAgGrid
        rowData={data}
        columnDefs={[
          { field: "priority" },
          { field: "status" },
          { field: "title" },
          { field: "description" },
          {
            cellDataType: "timeStamp",
            field: "created_at",
            headerName: "Created",
          },
          {
            cellDataType: "timeStamp",
            field: "updated_at",
            headerName: "Updated",
          },
        ]}
      />
    </div>
  );
}