oke
oke
Explore posts from servers
CDCloudflare DevelopersSSolidJSDTDrizzle Team
PostsComments
CDCloudflare Developers
Created by oke on 2/18/2025 in #pages-help
Cannot see "Build Configuration" option for Pages project on dashboard
No description
3 replies
SSolidJS
Created by oke on 2/12/2025 in #support
Help understanding the `solid` export condition, and how SolidStart uses it
Hi everyone. I am trying to build a Solidjs library and I keep seeing that a solid condition export is needed for libraries to work with SSR and SolidStart. I hope to get some help understanding what this it, why is it needed for SSR, and what is its relation with the generate: 'ssr' option of the babel preset
2 replies
SSolidJS
Created by oke on 2/11/2025 in #support
SSG isn't truly static
It seems like I have wrong presumption about what SSG meant. I want some routes on my site to be static - i.e. at build time it should do some async server stuff (like reading data from DB, read some files from file system, etc. ) --> Then populate the data into the markup, and return the page static. But that doesn't seem to work. One demonstration is: I have a route called random that generates a random number --> I configured server: { prerender: {routes: ['/random'] }}} (route code below) My expectation is that: This random number is generated ONCE during build time, and then all clients, regardless of page refresh or what not, will always see this same number. After building, if I directly access the '/random' URL that is fine - page refresh won't change the number. However, if I visit the another page first, and then visit the /random page via my navbar (which I uses presume is where the Client-side router kicks in), the page is still dynamic -> It still tries to make HTTP requests to my server functions, and returns a different number each time
20 replies
SSolidJS
Created by oke on 2/9/2025 in #support
Questions on the `preload` functionality
I am reading the docs on the preload functionality and the related query function. The doc says there are some caveats to be aware of when using preload, specifically
1. The preload function is called once per route, which is the first time the user comes to that route. Following that, the fine-grained resources that remain alive synchronize with state/url changes to refetch data when needed. If the data needs a refresh, the refetch function returned in the createResource can be used. 2. Before the route is rendered, the preload function is called. It does not share the same context as the route. The context tree that is exposed to the preload function is anything above the Page component. 3. On both the server and the client, the preload function is called. The resources can avoid refetching if they serialized their data in the server render. The server-side render will only wait for the resources to fetch and serialize if the resource signals are accessed under a Suspense boundary.
I have a few question questions about these text: 1. The preload function is called once per route, but then paragraph (3) says "on both the server and the client, the preload function is called" --> So that's actually twice ? Also why both the server and the client? Aren't server enough for rendering the page content? 2. I don't really understand "The resources can avoid refetching if they serialized their data in the server render" --> What/why/how is this refetching behavior? Why does serializing the data in the server render prevent this refetching? How do I "serialize data in the server render"
6 replies
SSolidJS
Created by oke on 2/9/2025 in #support
Generate static UI elements from server data only ONCE
I want to generate my navbar components based on my server folder structure Specifically, I have folder countries which contains file us.json and ca.json. For each file in folder countries, I want to generate an <A> element onto the Layout component. I struggle to know how to "send" this data from server to client and construct the UI, but only ONCE at startup - since the countries folder is static Stackblitz: https://stackblitz.com/~/github.com/bhuynhdev/solid-start-test My current code doesn't work. Locally, the page displays, but the Router just doesn't work - clicking on links only change the URL but doesn't update page content 
// (countries).tsx
import { For } from "solid-js";
import { basename, extname } from "path";
import { A } from "@solidjs/router";

function extractName(p) {
  return basename(p, extname(p));
}

const links = Object.keys(import.meta.glob("../countries/*")).map((path) => {
  const name = extractName(path);
  return { title: name, href: `/${name}` };
});

export default function Layout(props) {
  return (
    <main>
      <h1>Hello world!</h1>
      <ul>
        <For each={links}>
          {(link) => (
            <li>
              <A href={link.href}>Visit country {link.title}</A>
            </li>
          )}
        </For>
        {props.children}
      </ul>
    </main>
  );
}
// (countries).tsx
import { For } from "solid-js";
import { basename, extname } from "path";
import { A } from "@solidjs/router";

function extractName(p) {
  return basename(p, extname(p));
}

const links = Object.keys(import.meta.glob("../countries/*")).map((path) => {
  const name = extractName(path);
  return { title: name, href: `/${name}` };
});

export default function Layout(props) {
  return (
    <main>
      <h1>Hello world!</h1>
      <ul>
        <For each={links}>
          {(link) => (
            <li>
              <A href={link.href}>Visit country {link.title}</A>
            </li>
          )}
        </For>
        {props.children}
      </ul>
    </main>
  );
}
21 replies
SSolidJS
Created by oke on 2/9/2025 in #support
Do a one-time server operation upon page load, and then re-use that data
I am looking for a way to do a one-time database query for a very rarely changed dataset -> And then store that data into server memory for subsequent re-use More details: 1. I have a dynamic route /map/[country].tsx 2. Upon loading this page the first time, I want to query database for list of country and store that data into server memory. So that subsequent navigation to the map/[country].tsx can just index the maps object instead of querying the db again Currently, I have 
// map/[country].tsx
async function gatherData() {
  'use server'
  console.log("GATHERING")
  const maps = await db.findAll("maps")
  const mapObject = arrayToObject(maps)
  return mapObject
}

async loadMap(country) {
  'use server'
  console.log("LOADING FOR", country)
  const mapData = gatherData() // How to not call this again
  return mapData[country]
}

export default function CountryPage() {
  const params = useParams()
  const countryMap = createAsync(() => loadMap(params.country))
  return <p>{countryMap.name}</p>
}
// map/[country].tsx
async function gatherData() {
  'use server'
  console.log("GATHERING")
  const maps = await db.findAll("maps")
  const mapObject = arrayToObject(maps)
  return mapObject
}

async loadMap(country) {
  'use server'
  console.log("LOADING FOR", country)
  const mapData = gatherData() // How to not call this again
  return mapData[country]
}

export default function CountryPage() {
  const params = useParams()
  const countryMap = createAsync(() => loadMap(params.country))
  return <p>{countryMap.name}</p>
}
11 replies
DTDrizzle Team
Created by oke on 2/18/2024 in #help
Update with join with Drizzle
I am using Postgres. Table Author has a 1 to 1 relations with table User. Author table has field userId that links to the primary key in the User table. Is there a way to write ONE update query to set the penName field in the Author table, but return all fields from both the Author and the User tables. Right now I need to write two queries 
// Version 1
await db.update(author).set(request.body).where(eq(judge.id, request.params.id))

const updatedAuthor = await db.query.author.findFirst({
  where: eq(author.id, request.params.id),
  with: { user: true },
})
return updatedAuthor

// Version 2: Tried using .returning() but it also needs 2 queries
const [updated] = await db.update(author).set(request.body).where(eq(judge.id, request.params.id)).returning()

const toReturn = await db.query.author.findFirst({
  where: eq(author.id, updated.id),
  with: { user: true },
})
return toReturn
// Version 1
await db.update(author).set(request.body).where(eq(judge.id, request.params.id))

const updatedAuthor = await db.query.author.findFirst({
  where: eq(author.id, request.params.id),
  with: { user: true },
})
return updatedAuthor

// Version 2: Tried using .returning() but it also needs 2 queries
const [updated] = await db.update(author).set(request.body).where(eq(judge.id, request.params.id)).returning()

const toReturn = await db.query.author.findFirst({
  where: eq(author.id, updated.id),
  with: { user: true },
})
return toReturn
Or is two queries the standard way?
1 replies
DTDrizzle Team
Created by oke on 12/20/2023 in #help
How do detect if a Transaction failure occurs?
What is the return value of a transaction when it fails mid way, or does it throw an error? Example: 
const authorOrNull = await db.transaction(async (tx) => {
  const [u] = tx.insert(user).values(val).onConflictDoNothing().returning()

  if u:
    const [a] = tx.insert(author).values({ uId: u.id }).returning()
    return a ?? null
})
const authorOrNull = await db.transaction(async (tx) => {
  const [u] = tx.insert(user).values(val).onConflictDoNothing().returning()

  if u:
    const [a] = tx.insert(author).values({ uId: u.id }).returning()
    return a ?? null
})
How will I know when a transaction failure or a rollback has occurred, for example in case of random I/O failure, or resource exhaustion, or when the database connection is down half-way through the transaction
1 replies
DTDrizzle Team
Created by oke on 12/18/2023 in #help
Drizzle JOIN vs relations
Seems like both Join and relations are equally capable when query data that have relationships. I'd assume that if one is already using Drizzle relations (with with field), then one wouldn't need to use .join(), and vice versa. Is there a reason one should use JOIN vs. relations, or is it personal preference?
3 replies
DTDrizzle Team
Created by oke on 12/17/2023 in #help
How do I infer type of pgEnum
How can I infer the type of a pgEnum? 
export const roleEnum = pgEnum('role', ['A', 'B', 'C', 'D', 'E'])

// Expected to somehow have type Role = 'A' | 'B' | 'C' | 'D' | 'E'
type Role = typeof roleEnum.$inferMagic
export const roleEnum = pgEnum('role', ['A', 'B', 'C', 'D', 'E'])

// Expected to somehow have type Role = 'A' | 'B' | 'C' | 'D' | 'E'
type Role = typeof roleEnum.$inferMagic
2 replies