orjdev / solid-trpc Goto Github PK
View Code? Open in Web Editor NEWtRPC Adapter For SolidJS Using Tanstack Solid Query.
tRPC Adapter For SolidJS Using Tanstack Solid Query.
I have been trying to see what is wrong with the internal getArrayQueryKey
and I think it might be a bug potentially.
Trying to invalidate a query does not work as expected. Has this been tested?
I set the queryKey of a query to "getUsers" and using
const utils = trpc.useContext()
utils.invalidate(["getUsers"])
Thank you so much for your help!
Hey, could we add license to the project so people can legally use it?
Cheers!
My intellisense in vs code is not working and keeps loading.
My configuration is simply the get started with a monorepo where my client imports the approuter type. There is something that might be looping when put together solidquery. However, for some reason, even just the server file which is the standard trpc hello world struggles with inferring types.
Would appreciate any help thank you!
server app router file below
import { inferAsyncReturnType, initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import { z } from 'zod';
export const createContext = ({
req,
res,
}: trpcExpress.CreateExpressContextOptions) => {
const getUser = () => {
if (req.headers.authorization !== 'secret') {
return null;
}
return {
name: 'alex',
};
};
return {
req,
res,
user: getUser(),
};
};
type Context = inferAsyncReturnType<typeof createContext>;
const t = initTRPC.context<Context>().create();
export const appRouter = t.router({
hello: t.procedure
.input(z.object({ test: z.string() }))
.query(({ input, ctx }) => {
return `hello ${input ?? ctx.user?.name ?? 'world'}`;
}),
});
export type AppRouter = typeof appRouter;
client side file
import type { AppRouter } from '@flowy/server/src/router';
import { createTRPCSolid } from 'solid-trpc';
import { httpBatchLink } from '@trpc/client';
import { QueryClient } from '@tanstack/solid-query';
export const trpc = createTRPCSolid<AppRouter>();
export const client = trpc.createClient({
links: [
httpBatchLink({
url: 'http://localhost:8080/trpc',
}),
],
});
export const queryClient = new QueryClient();
According to Aryan (the creator and maintainer of tanstack solid query) SSR will be supported in tanstack query v5.
Once its released ssr support will be added to solid trpc.
Hi, great lib! I tried to use this library for a hobby love project and its great. Working fine, i just have one concern. When i update the state with useContext in a mutation onSuccess, i noticed the whole dom is re rendering. Every element on the page. The body will emptied and after rebuild the whole again. It is normal? I think something happens with the contexts or i don't know. I use the solid start with trpc, prisma and tailwindcss.
title
Hey, in a project created with create jd app ([email protected]) โ
Passing anything as the second argument causes a crash.
I am developing an app with Electron (using electron-vite). It's always showing this error
Here's the repo: https://github.com/zihan-ch/zhim
tRPC client: https://github.com/zihan-ch/zhim/blob/main/src/renderer/src/lib/trpc.ts
main.ts: https://github.com/zihan-ch/zhim/blob/main/src/renderer/src/main.tsx
When I use solid devtools to inspect the app, the context seems to be all right:
I assume that this is an error inside solid-trpc; it might have done some special processes that make the context disappeared.
ps: The app runs well without solid-trpc (the original trpc client instead).
Hello,
For context I have a trpc route which allows me to list products based on a catalog id.
My problem occurs when I change catalog, the request to list the products is well done, but the catalogId in the input of the request is unchanged. So I always get the same product list
I don't have this problem when I use createQuery, and when I call the query directly with @tanstack/solid-query, can you guide me on this problem?
Here are the portions of code concerned on the server/client side
/// Server
.query('products', {
input: z.object({ catalogId: z.string().uuid(), cursor: z.string().optional() }),
async resolve({ ctx, input }) {
const products = await new ProductService().listProductsByCatalog(ctx, input.catalogId)
if (products.isErr()) {
return {
error: products.error.json()
}
}
return {
data: products.value.map(mapProduct),
cursor: {
next: ''
}
}
}
})
/// Client
const catalogRouteData = (props: RouteDataFuncArgs) => {
const catalogId = () => props.params.catalogId
const products = trpc.createInfiniteQuery(() => ['catalogs.products', { catalogId: catalogId() }], {
getNextPageParam: ({ cursor }) => cursor?.next,
})
return {
products,
}
}
I thank you in advance for your help.
Hello! Would love an example of how to access the cookies in SSR. Currently trying to pass this into httpBatchLink
but the context is always an empty object from solid-start
. Thanks!
async headers() {
if (AppConfig.isServer) {
const context = useRequest();
const token = await getToken(context.request);
return {
Authorization: `Bearer ${token ?? ""}`,
};
} else {
const token = ClientCookieManager.getToken();
return {
Authorization: `Bearer ${token ?? ""}`,
};
}
},
Hi,
I am trying to use this in my solid-js application, I am getting the following exception while calling my hook for getting the data
query.ts:359 As of v4, queryKey needs to be an Array. If you are using a string like 'repoData', please change it to an Array, e.g. ['repoData']
and My function is
const res = trpc.terms.getTerms.useQuery();
Hello!
I've been experimenting with this using create-jd-app
, (wonderful work!) and it seems I've hit a bit of an issue.
I'm using v10 (0.0.7-beta.1).
I have the following code in a component:
const query = trpc.account.findAll.useQuery();
const context = trpc.useContext();
const mutation = trpc.account.create.useMutation({
onSuccess() {
context.account.findAll.invalidate();
},
});
When running the mutation, the call to invalidate
(or refetch
) don't trigger a refetch of the account.findAll
query as I'd hope.
My server code:
import { z } from 'zod';
import { procedure, router } from '../utils';
export default router({
create: procedure
.input(
z.object({
username: z.string().min(1),
})
)
.mutation(({ input, ctx }) => {
return ctx.prisma.account.create({ data: input });
}),
findAll: procedure.query(({ ctx }) => ctx.prisma.account.findMany()),
});
Hello ๐ Thank you for your package, it's awesome to use!
Trpc exports a react query helper that returns the query keys for a query. https://trpc.io/docs/client/react/getQueryKey How can I do this with Solid and trpc? ๐ง
This line causes eslint warning:
const [count, setCount] = createSignal("");
trpc.xyz.useQuery(() => Number(count()))
warning This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity. Details: https://github.com/solidjs-community/eslint-plugin-solid/blob/main/docs/reactivity.md solid/reactivity
And it points to the arrow function i used in useQuery. The funny thing is this works perfectly and do exactly what i want, its update when the count signal changes so i usually just ignore this warnings but somehow its bothers me. Can you give some examples how to do this right or the eslint plugin needs some update?
Thanks :)
Btw Great lib! I love it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.