MaveriX89
MaveriX89
Explore posts from servers
SSolidJSDTDrizzle Team
PostsComments
SSolidJS
Created by MaveriX89 on 1/21/2025 in #support
TanStack Query vs Solid Router
I'm looking to use Solidjs for a production app and have a question about a library I typically reach for (TanStack Query) for my SPAs and some of the built-in APIs for Solid Router: query + createAsync. Is there any reason to use TanStack when Solid Router comes with those built-in? Just wondering if there is something I'm missing because, the query + createAsync combination if I'm not mistaken provides a lot of the same benefits that TanStack does with request de-deduping and caching by key. Wondering if there are other gaps present that I am not privy to (e.g. easy request refetching/polling on interval or conditional fetching like the enabled field from TanStack Query). For the visually inclined -- the question is what is the recommendation between these two options and the pros/cons of each: Option 1: 
import { createQuery } from "@tanstack/solid-query";

function SomeComponent() {
  const query = createQuery(() => ({
    queryKey: ["userSession"],
    queryFn: async () => {
      const response = await fetch(...);
      if (!response.ok) throw new Error("Failed to fetch data");
      return response.json()
    },
    enabled: true,
    refetchInterval: 5000,
  }));
}
import { createQuery } from "@tanstack/solid-query";

function SomeComponent() {
  const query = createQuery(() => ({
    queryKey: ["userSession"],
    queryFn: async () => {
      const response = await fetch(...);
      if (!response.ok) throw new Error("Failed to fetch data");
      return response.json()
    },
    enabled: true,
    refetchInterval: 5000,
  }));
}
VS Option 2: 
import { createAsync, query } from "@solidjs/router";
const getUserSession = query(() => fetch(...), "userSession");

function SomeComponent() {
    const session = createAsync(() => getUserSession());
    // do stuff ...
}
import { createAsync, query } from "@solidjs/router";
const getUserSession = query(() => fetch(...), "userSession");

function SomeComponent() {
    const session = createAsync(() => getUserSession());
    // do stuff ...
}
P.S. Just throwing it out there but, man, Option 2 look really good haha
1 replies
SSolidJS
Created by MaveriX89 on 1/13/2025 in #support
Getting UnhandledPromiseRejection in Solid Start server function that stops dev server
I have an async function in my Solid Start app and am receiving the following error message whenever it returns an Error. 
UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<_Response>".
    at throwUnhandledRejectionsMode (node:internal/process/promises:392:7)
    at processPromiseRejections (node:internal/process/promises:475:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:106:32) {
  code: 'ERR_UNHANDLED_REJECTION'
}
UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<_Response>".
    at throwUnhandledRejectionsMode (node:internal/process/promises:392:7)
    at processPromiseRejections (node:internal/process/promises:475:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:106:32) {
  code: 'ERR_UNHANDLED_REJECTION'
}
Here is the function: 
export async function loginOrRegister(formData: FormData) {
  const username = String(formData.get("username"));
  const password = String(formData.get("password"));

  let error = validateUsername(username) || validatePassword(password);

  if (error) {
    // Promise.reject(new Error(error)). // <--- does not cause rejection, but UI does not show error message
    return new Error(error); // <--- UI shows error message but dev server stops due to UnhandledPromiseRejection
  }

  try {
    const user = await login(username, password);
    const session = await getSession();
    await session.update((d) => {
      d.userId = user.id;
    });
  } catch (err) {
    return err as Error;
  }

  throw redirect("/");
}
export async function loginOrRegister(formData: FormData) {
  const username = String(formData.get("username"));
  const password = String(formData.get("password"));

  let error = validateUsername(username) || validatePassword(password);

  if (error) {
    // Promise.reject(new Error(error)). // <--- does not cause rejection, but UI does not show error message
    return new Error(error); // <--- UI shows error message but dev server stops due to UnhandledPromiseRejection
  }

  try {
    const user = await login(username, password);
    const session = await getSession();
    await session.update((d) => {
      d.userId = user.id;
    });
  } catch (err) {
    return err as Error;
  }

  throw redirect("/");
}
Not sure exactly what's going on and hoping someone can perhaps provide insight.
29 replies
DTDrizzle Team
Created by MaveriX89 on 1/8/2025 in #help
drizzle-kit push not working with pgSchema
Hello, this is my first time using Drizzle and am running into some problems pushing my schema out. I have the following docker-compose.yaml that is spinning up a Postgres instance alongside Adminer. 
services:
  db:
    image: postgres
    restart: always
    environment:
      POSTGRES_PASSWORD: example
    ports:
      - 5432:5432

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080
services:
  db:
    image: postgres
    restart: always
    environment:
      POSTGRES_PASSWORD: example
    ports:
      - 5432:5432

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080
I am using a codebase first approach with Drizzle and have the following schema defined under the following path <project root>/drizzle/schema/auth.ts 
import { sql } from "drizzle-orm";
import { boolean, check, pgRole, pgSchema, text, timestamp, uuid } from "drizzle-orm/pg-core";

export const admin = pgRole("admin", { createRole: true, createDb: true, inherit: true });

export const authSchema = pgSchema("auth");

export const user = authSchema.table("user", {
  id: uuid("id").defaultRandom().primaryKey(),
  name: text("name").notNull(),
  username: text("username").notNull().unique(),
  email: text("email").notNull().unique(),
  emailVerified: boolean("email_verified").notNull(),
  image: text("image"),
  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
});

export const userAccount = authSchema.table(
  "useraccount",
  {
    id: uuid("id").defaultRandom().primaryKey(),
    accountId: text("account_id"),
    providerId: text("provider_id"),
    userId: text("user_id")
      .notNull()
      .references(() => user.id, { onDelete: "cascade" }),
    accessToken: text("access_token"),
    refreshToken: text("refresh_token"),
    idToken: text("id_token"),
    scope: text("scope"),
    password: text("password").notNull(),
    accessTokenExpiresAt: timestamp("access_token_expires_at", { withTimezone: true }),
    refreshTokenExpiresAt: timestamp("refresh_token_expires_at", { withTimezone: true }),
    createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
    updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
  },
  (table) => [
    {
      checkConstraint: check("password_check", sql`char_length(${table.password}) >= 8`),
    },
  ],
);

export const session = authSchema.table("session", {
  id: uuid("id").defaultRandom().primaryKey(),
  token: text("token").notNull().unique(),
  ipAddress: text("ip_address"),
  userAgent: text("user_agent"),
  userId: text("user_id")
    .notNull()
    .references(() => user.id, { onDelete: "cascade" }),
  expiresAt: timestamp("expires_at", { withTimezone: true }).default(
    sql`(now() + interval '7 days')`,
  ),
  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
});

export const verification = authSchema.table("verification", {
  id: uuid("id").defaultRandom().primaryKey(),
  identifier: text("identifier").notNull(),
  value: text("value").notNull(),
  expiresAt: timestamp("expires_at", { withTimezone: true }).default(
    sql`(now() + interval '7 days')`,
  ),
  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
});
import { sql } from "drizzle-orm";
import { boolean, check, pgRole, pgSchema, text, timestamp, uuid } from "drizzle-orm/pg-core";

export const admin = pgRole("admin", { createRole: true, createDb: true, inherit: true });

export const authSchema = pgSchema("auth");

export const user = authSchema.table("user", {
  id: uuid("id").defaultRandom().primaryKey(),
  name: text("name").notNull(),
  username: text("username").notNull().unique(),
  email: text("email").notNull().unique(),
  emailVerified: boolean("email_verified").notNull(),
  image: text("image"),
  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
});

export const userAccount = authSchema.table(
  "useraccount",
  {
    id: uuid("id").defaultRandom().primaryKey(),
    accountId: text("account_id"),
    providerId: text("provider_id"),
    userId: text("user_id")
      .notNull()
      .references(() => user.id, { onDelete: "cascade" }),
    accessToken: text("access_token"),
    refreshToken: text("refresh_token"),
    idToken: text("id_token"),
    scope: text("scope"),
    password: text("password").notNull(),
    accessTokenExpiresAt: timestamp("access_token_expires_at", { withTimezone: true }),
    refreshTokenExpiresAt: timestamp("refresh_token_expires_at", { withTimezone: true }),
    createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
    updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
  },
  (table) => [
    {
      checkConstraint: check("password_check", sql`char_length(${table.password}) >= 8`),
    },
  ],
);

export const session = authSchema.table("session", {
  id: uuid("id").defaultRandom().primaryKey(),
  token: text("token").notNull().unique(),
  ipAddress: text("ip_address"),
  userAgent: text("user_agent"),
  userId: text("user_id")
    .notNull()
    .references(() => user.id, { onDelete: "cascade" }),
  expiresAt: timestamp("expires_at", { withTimezone: true }).default(
    sql`(now() + interval '7 days')`,
  ),
  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
});

export const verification = authSchema.table("verification", {
  id: uuid("id").defaultRandom().primaryKey(),
  identifier: text("identifier").notNull(),
  value: text("value").notNull(),
  expiresAt: timestamp("expires_at", { withTimezone: true }).default(
    sql`(now() + interval '7 days')`,
  ),
  createdAt: timestamp("created_at", { withTimezone: true }).defaultNow(),
  updatedAt: timestamp("updated_at", { withTimezone: true }).defaultNow(),
});
And this is my drizzle.config.ts: 
import { defineConfig } from "drizzle-kit";

export default defineConfig({
  dialect: "postgresql",
  schema: "./drizzle/schema/*",
  out: "./drizzle/migrations/",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});
import { defineConfig } from "drizzle-kit";

export default defineConfig({
  dialect: "postgresql",
  schema: "./drizzle/schema/*",
  out: "./drizzle/migrations/",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});
I was able to successfully do drizzle-kit push and I did this while my databse was running in a container. However, when I open up Adminer to inspect the database, I do not see my auth schema shown in the UI nor any of the tables I have defined. Hoping someone can assist me here. Thanks in advance!
8 replies
SSolidJS
Created by MaveriX89 on 1/7/2025 in #support
Containerized Solid Start Deployments
I'm new to using Solid Start and full-stack frameworks -- I usually create "vanilla" app architectures (e.g. a Solidjs SPA paired with an Elysia backend-for-frontend layer). With those vanilla setups, I could containerize the deployments using Dockerfiles and reason about them very easily. However, for Solid Start, I'm not sure how to reason about them fully because there are gaps in my knowledge. The intent I have is to create a containerized Solid Start deployment that I could run anywhere (Azure, AWS, GCP, etc.). In my app, I am using a database (SQLite + Drizzle ORM) and Better Auth for authentication/authorization (it adds tables to the database mentioned earlier). I would also like to use Bun for my runtime -- unsure if this is a wise-decision if Bun isn't supported fully across hosting providers. I had the following Dockerfile but unfortunately it does not work as the docker build chokes when attempting to install the better-sqlite3 dependency I have in my project: 
FROM oven/bun:1.1.42-alpine

WORKDIR /app

COPY package.json bun.lock ./
RUN bun install --frozen-lockfile

COPY public ./public
COPY tsconfig.json ./
COPY app.config.ts ./
COPY drizzle ./drizzle
COPY src ./src

RUN bun run build

EXPOSE 3000

CMD ["bun", "start"]
FROM oven/bun:1.1.42-alpine

WORKDIR /app

COPY package.json bun.lock ./
RUN bun install --frozen-lockfile

COPY public ./public
COPY tsconfig.json ./
COPY app.config.ts ./
COPY drizzle ./drizzle
COPY src ./src

RUN bun run build

EXPOSE 3000

CMD ["bun", "start"]
I suspect it has something to do with the base Bun image I'm using, but I went and used the full oven/bun base image and that still did not resolve the install block on better-sqlite3. Hoping someone with more experience in this arena can assist or guide my thinking so that I can better understand how to work through these kinds of problems. Thanks for any help in advance! P.S. I feel like this is a great opportunity to perhaps update the Solid Start documentation to include a section on Deployments and what that looks like if people want to pursue the whole "build once and deploy anywhere" mantra. That may be a pipe dream because I'm sure there are a lot of fancy things going on under the hood that may make that hard to generalize, but just a thought that I had and wanted to share here. 🙂
2 replies
SSolidJS
Created by MaveriX89 on 4/30/2024 in #support
Vite 5.2.x / Vitest 1.5.x: How to Resolve Multiple Instances of Solid
I am nearing my wits end trying to resolve these error messages I receive when trying to run my SolidJS tests with @solidjs/testing-library and vitest 
stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/__tests__/App.test.tsx > <App /> > it will render an text input and a button
computations created outside a `createRoot` or `render` will never be disposed
stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/__tests__/App.test.tsx > <App /> > it will render an text input and a button
computations created outside a `createRoot` or `render` will never be disposed
I do not know what else to try and need assistance if anyone can help. I have the following vite.config.ts 
/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
    proxy: {
      // Proxy API requests to the backend port in development
      "/api": "http://localhost:8000",
    },
  },
  build: {
    target: "esnext",
    copyPublicDir: false,
  },
  resolve: {
    conditions: ["development", "browser"],
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    testTransformMode: { web: ["/.[jt]sx?$/"] },
    server: {
      deps: {
        inline: [/solid-js/],
      },
    },
    deps: {
      optimizer: {
        web: {
          enabled: true,
          include: ['solid-js'],
        }
      }
    },
    coverage: {
      all: true,
      provider: "istanbul",
      thresholds: {
        "100": true,
      },
    },
  },
});
/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { configDefaults } from "vitest/config";

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
    proxy: {
      // Proxy API requests to the backend port in development
      "/api": "http://localhost:8000",
    },
  },
  build: {
    target: "esnext",
    copyPublicDir: false,
  },
  resolve: {
    conditions: ["development", "browser"],
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    testTransformMode: { web: ["/.[jt]sx?$/"] },
    server: {
      deps: {
        inline: [/solid-js/],
      },
    },
    deps: {
      optimizer: {
        web: {
          enabled: true,
          include: ['solid-js'],
        }
      }
    },
    coverage: {
      all: true,
      provider: "istanbul",
      thresholds: {
        "100": true,
      },
    },
  },
});
In my package.json these are the dependencies I have: 
{
  "dependencies": {
    "@elysiajs/static": "^1.0.3",
    "elysia": "^1.0.15",
    "solid-js": "^1.8.17"
  },
  "devDependencies": {
    "@elysiajs/eden": "^1.0.12",
    "@solidjs/testing-library": "^0.8.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/bun": "^1.1.0",
    "@types/node": "20.10.0",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "@vitest/coverage-istanbul": "^1.5.2",
    "eslint": "^8.56.0",
    "eslint-plugin-simple-import-sort": "^12.1.0",
    "eslint-plugin-solid": "^0.14.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
    "typescript": "5.4.5",
    "vite": "^5.2.10",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^1.5.2"
  },
}
{
  "dependencies": {
    "@elysiajs/static": "^1.0.3",
    "elysia": "^1.0.15",
    "solid-js": "^1.8.17"
  },
  "devDependencies": {
    "@elysiajs/eden": "^1.0.12",
    "@solidjs/testing-library": "^0.8.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/bun": "^1.1.0",
    "@types/node": "20.10.0",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "@vitest/coverage-istanbul": "^1.5.2",
    "eslint": "^8.56.0",
    "eslint-plugin-simple-import-sort": "^12.1.0",
    "eslint-plugin-solid": "^0.14.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.2.5",
    "typescript": "5.4.5",
    "vite": "^5.2.10",
    "vite-plugin-solid": "^2.10.2",
    "vitest": "^1.5.2"
  },
}
6 replies
SSolidJS
Created by MaveriX89 on 2/4/2024 in #support
How to handle necessary async/await work inside of a createEffect?
I'm building a SolidJS hook library and I have some asynchronous work that needs to happen which is occurring in a createEffect. I'm currently trying to write integration tests against my hook library and running into problems because I'm currently not awaiting the Promise result which is conflicting with other things occurirng in test. The way I work around it for testing purposes is literally doing an await sleep(1000) in test to wait for that asynchronous work to finish. Is there a better way to write my createEffect in such a way where I do not have to do a sleep in test? 
function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
  const [doc, setDoc] = createSignal(initialDocFn());
  const initialDocId = () => initialDocFn()._id;

  const refreshDoc = async (db: Database, docId = "") => {
    const storedDoc = await db.get<T>(docId).catch(initialDocFn);
    setDoc(() => storedDoc);
  };

  createEffect(() => {
    // This is the problematic instruction. How can I re-express this to properly await it?
    void refreshDoc(database(), initialDocId());
  });
}
function createDocument<T extends DocRecord<T>>(initialDocFn: Accessor<Doc<T>>): CreateDocumentResult<T> {
  const [doc, setDoc] = createSignal(initialDocFn());
  const initialDocId = () => initialDocFn()._id;

  const refreshDoc = async (db: Database, docId = "") => {
    const storedDoc = await db.get<T>(docId).catch(initialDocFn);
    setDoc(() => storedDoc);
  };

  createEffect(() => {
    // This is the problematic instruction. How can I re-express this to properly await it?
    void refreshDoc(database(), initialDocId());
  });
}
8 replies
SSolidJS
Created by MaveriX89 on 1/28/2024 in #support
Getting ReferenceError: React is not defined with Vitest + Solid Testing Library
I honestly have no idea how I am receiving this error but I am despite testing using @solidjs/testing-library. Moreover, I am using Vitest by itself (not Vite) and my vitest.config.ts is as follows: 
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    deps: {
      optimizer: {
        web: { enabled: true },
        ssr: { enabled: true },
      },
    },
    isolate: false,
    coverage: {
      provider: "istanbul",
    },
  },
});
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./setupTests.ts"],
    deps: {
      optimizer: {
        web: { enabled: true },
        ssr: { enabled: true },
      },
    },
    isolate: false,
    coverage: {
      provider: "istanbul",
    },
  },
});
The test that is causing the error to appear is a custom Solid hook test where I am attempting to pass a wrapper to my renderHook invocation. 
import { renderHook } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";

import { createDbQuery } from "../createDbQuery";

function FakeComponent() {
  return <div />
}

describe("HOOK: createDbQuery", () => {
  it("can be used as expected", async () => {
    const { result } = renderHook(() => createDbQuery((d) => d), { wrapper: FakeComponent });
    const db = createDbQuery.database();

    expect(result()).toEqual({ rows: [], docs: [] });
    await db.put({ good: true });
    expect(result().docs.length).toBe(1);
  });
});
import { renderHook } from "@solidjs/testing-library";
import { describe, expect, it } from "vitest";

import { createDbQuery } from "../createDbQuery";

function FakeComponent() {
  return <div />
}

describe("HOOK: createDbQuery", () => {
  it("can be used as expected", async () => {
    const { result } = renderHook(() => createDbQuery((d) => d), { wrapper: FakeComponent });
    const db = createDbQuery.database();

    expect(result()).toEqual({ rows: [], docs: [] });
    await db.put({ good: true });
    expect(result().docs.length).toBe(1);
  });
});
ReferenceError: React is not defined
 ❯ Object.FakeComponent [as wrapper] src/__tests__/createDbQuery.test.tsx:7:3
      5| 
      6| function FakeComponent() {
      7|   return <div />
       |   ^
      8| }
      9| 
ReferenceError: React is not defined
 ❯ Object.FakeComponent [as wrapper] src/__tests__/createDbQuery.test.tsx:7:3
      5| 
      6| function FakeComponent() {
      7|   return <div />
       |   ^
      8| }
      9|
Anybody seen that before?
26 replies
SSolidJS
Created by MaveriX89 on 1/27/2024 in #support
Creating custom SolidJS hook that can be used in a global scope
Need some help understanding how to build a custom SolidJS hook that can be used both locally inside a component and outside in the global scope (like createSignal can). Below is. a small snippet of a custom hook I am writing: 
export function createDatabase(dbOrName?: string | Database, config: ConfigOpts = {}): CreateDatabase {

  const database = createMemo(() => (isDatabase(dbOrName) ? dbOrName : genDb(dbOrName || "DefaultDB", config)));

return { database }
export function createDatabase(dbOrName?: string | Database, config: ConfigOpts = {}): CreateDatabase {

  const database = createMemo(() => (isDatabase(dbOrName) ? dbOrName : genDb(dbOrName || "DefaultDB", config)));

return { database }
The question I have is around the floating createMemo that I use in the implementation. When I use the createDatabase hook globally, I get greeted with the console warning: computations created outside a 'createRoot' or 'render' will never be disposed I'm not familiar with how to properly address that warning and hoping the community can offer some guidance here.
17 replies
SSolidJS
Created by MaveriX89 on 1/1/2024 in #support
Need clarity on eslint(solid/reactivity) warning use-case
I need help understanding how to deal with this ESLint warning when I am building a custom SolidJS hook library that doesn't have any visual components. There is a portion of my custom hook code that gets called out by this warning and I don't know how I should properly resolve it (or if it is safe to ignore it). The code snippet where I receive the warning is the following: 
import { Accessor, createSignal, onMount, onCleanup } from "solid-js";

type LiveQueryResult = {
  readonly docs: Doc[];
  readonly rows: any[];
};

// NOTE: database is an accessor defined outside of this custom hook (via createMemo). createLiveQuery is effectively the inner function of an outer closure.
const createLiveQuery = (key: string, query = {}, initialRows: any[] = []): Accessor<LiveQueryResult> => {
    const [result, setResult] = createSignal({
      rows: initialRows,
      docs: initialRows.map((r) => r.doc),
    });

    const refreshRows = async () => {
      const res = await database().query(key, query);
      setResult({ ...res, docs: res.rows.map((r) => r.doc) });
    };

    onMount(() => {
      // this is where I receive the ESLint warning. Specifically on the callback passed to subscribe as the `refreshRows` function has internal reactivity due to using database() under the hood.
      const unsubscribe = database().subscribe(() => void refreshRows());

      onCleanup(() => {
        unsubscribe();
      });
    });

    return result;
  };
import { Accessor, createSignal, onMount, onCleanup } from "solid-js";

type LiveQueryResult = {
  readonly docs: Doc[];
  readonly rows: any[];
};

// NOTE: database is an accessor defined outside of this custom hook (via createMemo). createLiveQuery is effectively the inner function of an outer closure.
const createLiveQuery = (key: string, query = {}, initialRows: any[] = []): Accessor<LiveQueryResult> => {
    const [result, setResult] = createSignal({
      rows: initialRows,
      docs: initialRows.map((r) => r.doc),
    });

    const refreshRows = async () => {
      const res = await database().query(key, query);
      setResult({ ...res, docs: res.rows.map((r) => r.doc) });
    };

    onMount(() => {
      // this is where I receive the ESLint warning. Specifically on the callback passed to subscribe as the `refreshRows` function has internal reactivity due to using database() under the hood.
      const unsubscribe = database().subscribe(() => void refreshRows());

      onCleanup(() => {
        unsubscribe();
      });
    });

    return result;
  };
What is the proper way to address the warning in this case? Or is this something I can safely ignore perhaps?
5 replies