SolidJS•5mo ago

Hydration problem in Solid Start

In the following code, I'm using Tanstack Query to fetch some data needed to render a form. When I navigate to the page using client-side navigation (by clicking a link), the form is not visible. It is, however, present on the DOM, but without hydration keys. If I then refresh the page, the form becomes visible, and its elements in the DOM get hydration keys. Any idea what's causing this?

2 Replies

NathanOP•5mo ago

const TransactionView: Component<RouteSectionProps> = () => {
  const envelopesQuery = createQuery(() => ({
    queryKey: ["transactions", "envelopes"],
    queryFn: async () => await getEnvelopes(),
  }))

  const createTransactionMutation = createMutation(() => ({
    mutationFn: createTransaction,
  }))

  return (
    <ErrorBoundary fallback={<div>"Error!"</div>}>
      <table class="w-full table-fixed">
        <thead>
          <tr>
            <th class="w-1/6">Date</th>
            <th class="w-1/6">Amount</th>
            <th class="w-1/6">Description</th>
            <th class="w-1/6">Payee</th>
            <th class="w-1/6">Envelope Name</th>
            <th class="w-1/6">Bank Account Name</th>
          </tr>
        </thead>
        <tbody>
          
          <tr>
            <Suspense fallback={<div>Loading form...</div>}>
              <TransactionForm
                onSubmit={(values) => createTransactionMutation.mutate(values)}
                envelopes={envelopesQuery.data || []}
              />
            </Suspense>
          </tr>
        </tbody>
      </table>
    </ErrorBoundary>
  )
}

const TransactionView: Component<RouteSectionProps> = () => {
  const envelopesQuery = createQuery(() => ({
    queryKey: ["transactions", "envelopes"],
    queryFn: async () => await getEnvelopes(),
  }))

  const createTransactionMutation = createMutation(() => ({
    mutationFn: createTransaction,
  }))

  return (
    <ErrorBoundary fallback={<div>"Error!"</div>}>
      <table class="w-full table-fixed">
        <thead>
          <tr>
            <th class="w-1/6">Date</th>
            <th class="w-1/6">Amount</th>
            <th class="w-1/6">Description</th>
            <th class="w-1/6">Payee</th>
            <th class="w-1/6">Envelope Name</th>
            <th class="w-1/6">Bank Account Name</th>
          </tr>
        </thead>
        <tbody>
          
          <tr>
            <Suspense fallback={<div>Loading form...</div>}>
              <TransactionForm
                onSubmit={(values) => createTransactionMutation.mutate(values)}
                envelopes={envelopesQuery.data || []}
              />
            </Suspense>
          </tr>
        </tbody>
      </table>
    </ErrorBoundary>
  )
}

Madaxen86•5mo ago

Typical reasons for hydration issues: 1. Server and client fetch results are different (e.g. jwt or auth cookie not passed to fetch in server, … 2. Destructured props 3. Conditional render with different results on server or client.

Gaming

Programming

Hydration problem in Solid Start