query$

API for the query$ function

Converts the function to be a server$ function and will add in zod validation if there is a zod object in the 2nd argument. Return object has createQuery method on it from @tanstack/solid-query.

If you want to modify the response headers / cookies, make sure to check out the response$ docs.

Syntax

Currently there are two ways to implement a query

Syntax 1

import { query$, response$ } from '@prpc/solid'
import { z } from 'zod'
export const cleanSyntaxQuery = query$({
  queryFn: async ({ payload }) => {
    return { result: payload.a + payload.b }
  },
  key: 'cleanSyntaxQuery',
  schema: z.object({
    a: z.number().max(5),
    b: z.number().max(10),
  }),
})

Syntax 2

import { query$, response$ } from '@prpc/solid'
import { z } from 'zod'

export const add = query$(
  ({ payload, request$ }) => {
    const result = payload.a + payload.b
    console.log(request$.headers.get('user-agent'))
    return response$(result, {
      headers: {
        'set-cookie': 'solid-testing=1',
      },
    })
  },
  'add',
  z.object({
    a: z.number(),
    b: z.number(),
  })
)

Examples

import { query$ } from '@prpc/solid'
import { z } from 'zod'
import { isServer } from 'solid-js/web'

export const decrease = query$(
  ({ payload }) => {
    const result = payload.a - payload.b
    console.log(isServer)
    console.log('add', result)
    return result
  },
  'decrease', // this will be used as the query key (along with the input)
  z.object({
    a: z.number(),
    b: z.number(),
  }) // this will be used as the input type and input validation
)

Client Usage

import { createSignal, Suspense, type VoidComponent } from 'solid-js'
import { decrease } from '~/server/queries'

const Query: VoidComponent = () => {
  const [num1, setNum1] = createSignal(1)
  const addRes = decrease(
    () => ({
      a: num1(),
      b: 2,
    }),
    () => ({
      placeholderData: (prev) => prev,
    })
  )

  return (
    <div>
      <Suspense>
        <p>{addRes.data ? `Num: ${addRes.data}` : 'Pending'}</p>
      </Suspense>
      <button onClick={() => setNum1((num) => num + 1)}>Increment</button>
    </div>
  )
}

API

• First argument is the function to be wrapped with server$
• Second argument is the mutation key for @tanstack/solid-query
• Third argument is zod schema (optional)

Usage

Returns an object with createQuery from @tanstack/solid-query