SolidJS•4w ago

Solid Start tanstack query prefetch

I want to prefetch data into tanstack query server side only, if I do like this I can still see the request in network tab I am comming from nextjs react server components where you can use HydrationBoundary and have the data load server side only, I just dont understand how to do it in solid start

import { RouteDefinition } from "@solidjs/router";
import {
  createQuery,
  SolidQueryOptions,
  useQueryClient,
} from "@tanstack/solid-query";
import { rpc } from "~/lib/rpc";

export const route = {
  preload: () => {
    const queryClient = useQueryClient();
    queryClient.prefetchQuery(commentsQueryOpts());
  },
} satisfies RouteDefinition;

const commentsQueryOpts = (props: Partial<SolidQueryOptions> = {}) => ({
  ...(props as object),
  queryKey: ["comments"],
  queryFn: async () => (await rpc.api.comment.get()).data!,
});

export default function Chat() {
  const commentsQuery = createQuery(() =>
    commentsQueryOpts({ enabled: false }),
  );

  return <div>{commentsQuery.data?.[0]?.id || "nothing"}</div>;
}

import { RouteDefinition } from "@solidjs/router";
import {
  createQuery,
  SolidQueryOptions,
  useQueryClient,
} from "@tanstack/solid-query";
import { rpc } from "~/lib/rpc";

export const route = {
  preload: () => {
    const queryClient = useQueryClient();
    queryClient.prefetchQuery(commentsQueryOpts());
  },
} satisfies RouteDefinition;

const commentsQueryOpts = (props: Partial<SolidQueryOptions> = {}) => ({
  ...(props as object),
  queryKey: ["comments"],
  queryFn: async () => (await rpc.api.comment.get()).data!,
});

export default function Chat() {
  const commentsQuery = createQuery(() =>
    commentsQueryOpts({ enabled: false }),
  );

  return <div>{commentsQuery.data?.[0]?.id || "nothing"}</div>;
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Solid Start tanstack query prefetch