sh03
sh03
Explore posts from servers
SSolidJSTtRPCKKyselyTTCTheo's Typesafe Cult
PostsComments
TtRPC
Created by sh03 on 12/17/2024 in #❓-help
`useSuspenseQuery` with Remix causes weird "Failed to parse URL from /api" errors
I'm using tRPC with Remix (no loaders, just a client app) and as soon as I converted my codebase from useQuery to useSuspenseQuery I'm now getting "Failed to parse URL from /api". errors in my console and server. It seems as though the queries are being run on the server for some reason (where /api cannot be parsed because window.location is not available). Any ideas what's going on? Is this intended behaviour?
2 replies
TtRPC
Created by sh03 on 12/12/2024 in #❓-help
SSR in Remix/React Router
Has someone managed by any chance to make tRPC SSR work in Remix/React Router?
2 replies
TtRPC
Created by sh03 on 12/12/2024 in #❓-help
Simplifying SSR (e.g. in Next.JS)
I'm just trying to figure out if I'm missing something or if somebody else already tries this but: Wouldn't it be theoretically possible, for SSR, to detect when a useQuery is being SSR (e.g. checking typeof window === 'undefined') and therefore await the fetch call automatically and then pass it to initialData to rehydrate on the client?
3 replies
SSolidJS
Created by sh03 on 12/3/2024 in #support
Details on how client code and server code is split
Is there detailed documentation on how server code and client code is split into two different bundles and how module side effects are handled? I'm having some issues with a "use server" module apparently loading server libraries into the client and I'm not sure I understand why.
9 replies
SSolidJS
Created by sh03 on 12/1/2024 in #support
Confusion about `"use server"`
I have a few questions related to "use server": 1. Should all server-only files be "use server"? If not, why not? 2. I see that you can export anything other than a function from a module that is tagged with "use server", what's the reason for it? 3. Does "use server" on a module expose all functions from that module to the public (e.g. they can be called from the outside in a RPC fashion)? 4. Should I only mark "use server" functions that I intend to call on the client?
6 replies
SSolidJS
Created by sh03 on 12/1/2024 in #support
`reload`/`revalidate` + other response (e.g. `json` or `redirect`)
I'm kinda confused as to why reload and revalidate has to be part of the response from an action. How can I both reload/revalidate cache keys and also redirect or return some other response from an action?
53 replies
SSolidJS
Created by sh03 on 11/30/2024 in #support
Hydration Mismatch with `solid-icons`
I have this component: 
import { JSX, Show } from "solid-js";

type Props = {
  left?: JSX.Element;
  right?: JSX.Element;
  children: JSX.Element;
};

export const WithIcon = (props: Props) => {
  return (
    <div class="flex items-center justify-center space-x-4">
      <Show when={props.left}>
        <div>{props.left}</div>
      </Show>
      <div>{props.children}</div>
      <Show when={props.right}>
        <div>{props.right}</div>
      </Show>
    </div>
  );
};
import { JSX, Show } from "solid-js";

type Props = {
  left?: JSX.Element;
  right?: JSX.Element;
  children: JSX.Element;
};

export const WithIcon = (props: Props) => {
  return (
    <div class="flex items-center justify-center space-x-4">
      <Show when={props.left}>
        <div>{props.left}</div>
      </Show>
      <div>{props.children}</div>
      <Show when={props.right}>
        <div>{props.right}</div>
      </Show>
    </div>
  );
};
and I call it as: 
<WithIcon right={<ImCross />}>Something</WithIcon>
<WithIcon right={<ImCross />}>Something</WithIcon>
where <ImCross /> is a solid-icons icon. When I do that I see the icon for a split second and then I get:
Hydration Mismatch. Unable to find DOM nodes for hydration key: 0000000010000010000000600021200 <svg stroke-width="0"></svg>
Am I doing something wrong?
8 replies
SSolidJS
Created by sh03 on 11/30/2024 in #support
Is `query` cached per request or globally?
Is query cached per request? The documentation doesn't seem clear about it but I'd expect so. Since I'm about to create a getViewer function it's probably best to make sure this is the case 😅
2 replies
SSolidJS
Created by sh03 on 11/29/2024 in #support
Using zod to validate env vars
Is there a pattern similar to the one recommend in the React world for accessing env vars only after they have been parsed & checked by zod? Something like this: https://creatures.sh/blog/env-type-safety-and-validation/#validating-environment-variables ------------------------------------- What have I tried? I've read: https://docs.solidjs.com/configuration/environment-variables but here the type safety doesn't make it so the server won't start without those variables (which is what I'd prefer). Moreover Zod also enables safety checks like checking that a string is a URL or is a specific set of possible strings that just defining the types doesn't.
20 replies
SSolidJS
Created by sh03 on 11/29/2024 in #support
Pass a named function callback to an old JS library
I have a library that accepts a data-callback="someFn" attribute in one of the elements. Is there a way in SolidJS to create this function at the component level and pass it down to that attribute?
73 replies
SSolidJS
Created by sh03 on 11/29/2024 in #support
Difference between a nested route layout and just wrapping a route with a <Layout> component
Is there a practical difference between declaring a nested route layout like this: https://docs.solidjs.com/solid-start/building-your-application/routing#nested-layouts and just wrapping a route with a <Layout> component?
3 replies
SSolidJS
Created by sh03 on 11/26/2024 in #support
OAuth / OpenID Connect
What’s the simplest way you guys have found to implement a sign in with Google / Instagram / Apple in SolidJS?
21 replies
SSolidJS
Created by sh03 on 11/25/2024 in #support
SSR with `query`
I'm trying to use @solidjs/router's query like this: 
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export const fetchData = query(async (id: string) => {
  "use server";

  await wait(100);

  return { id };
}, "data");
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export const fetchData = query(async (id: string) => {
  "use server";

  await wait(100);

  return { id };
}, "data");
and I have ssr: true in my app config. If I disable JS and make a request in a route like this: 
const data = createAsync(() => fetchData("Yo"));
const data = createAsync(() => fetchData("Yo"));
it doesn't SSR the page (in fact the page remains white with no errors neither on the client nor on the server). Is query supposed to be called on the server or how can I SSR async server-only queries?
5 replies
SSolidJS
Created by sh03 on 11/24/2024 in #support
Background jobs in Solid Start
Is there a way to run background jobs in Solid Start? Any server entry point can suffice since I can just set it up via node-cron or similar libraries.
37 replies
TtRPC
Created by sh03 on 10/26/2024 in #❓-help
Custom data transformer
Has anyone had any experience with custom data transformers? I'm trying to map LocalDate, LocalTime, Instant, etc. from a date & time library. Every type can be serialized to a string (the corresponding ISO format) but it's unclear to me what the best strategy is via a data transformer? Should I serialize these objects to a custom shape (e.g. { type: "LocalDate", value: "..." }) so that it's trivial to deserialize? Seems kinda redundant since the type information is already at the type level. Without a custom shape it's unclear to me how I would be able to deserialize the object given that I don't know the destination type.
4 replies
TtRPC
Created by sh03 on 3/9/2024 in #❓-help
The inferred type of 'trpc' cannot be named without a reference
I'm getting the same error as this post: https://discord.com/channels/867764511159091230/1170736851775127564/1170736851775127564 I have a monorepo setup with an api package (copied from https://github.com/t3-oss/create-t3-turbo/tree/main/packages/api) and a server + expo packages similarly copied from that monorepo. Any ideas what I should be looking at to solve this issue?
2 replies
TtRPC
Created by sh03 on 3/1/2024 in #❓-help
Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutation
I'm getting this error:
Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.ts(2740) context.d.ts(48, 5): The expected type comes from property 'queryClient' which is declared here on type 'IntrinsicAttributes & TRPCProviderProps<CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>, unknown>'
on line: 
<api.Provider client={trpcClient} queryClient={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
^ (copy pasted from https://trpc.io/docs/client/react/setup) These are my relevant package versions: 
    "@tanstack/react-query": "^5.24.1",
    "@trpc/client": "^10.45.1",
    "@trpc/react-query": "^10.45.1",
    "@trpc/server": "^10.45.1",
    "@tanstack/react-query": "^5.24.1",
    "@trpc/client": "^10.45.1",
    "@trpc/react-query": "^10.45.1",
    "@trpc/server": "^10.45.1",
what am I doing wrong?
13 replies
TtRPC
Created by sh03 on 3/8/2023 in #❓-help
How to organise reusable functions
How do you guys organize functions that all need the same context (usually from tRPC)? For example let's say that you have 10 functions you use multiple times across multiple routers and they all share the same context. Do you use a class?
25 replies