diff --git a/README.MD b/README.MD index 445896b..95fb722 100644 --- a/README.MD +++ b/README.MD @@ -57,5 +57,24 @@ export default App; import { trpc } from "./utils/trpc"; import { createSignal } from "solid-js"; const [name, setName] = createSignal(""); -const res = trpc.queryName.useQuery(() => ({ name: name() })); // this will be called when name changes +const res = trpc.queryName.useQuery(() => ({ name: name() })); // this will be called onMount and when name changes ``` + +### Using Options + +If you are using the `enabled` property make sure you follow Solid Query rules: + +```ts +const [enabled, setEnabled] = createSignal(false); +const query = trpc.queryName.useQuery(() => "hey there", { + // ❌ passing a signal directly is not reactive + // enabled: enabled(), + + // ✅ passing a function that returns a signal is reactive + get enabled() { + return enabled(); + }, +}); +``` + +And options could be passed to all hooks. diff --git a/package.json b/package.json index ef78730..e436ee7 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "SolidJS tRPC", "author": "OrJDev", "license": "MIT", - "version": "0.0.6-rc.1", + "version": "0.0.7-rc.1", "publishConfig": { "access": "public", "tag": "next" diff --git a/src/createTRPCSolid.ts b/src/createTRPCSolid.ts index 3288d6a..3a492df 100644 --- a/src/createTRPCSolid.ts +++ b/src/createTRPCSolid.ts @@ -45,7 +45,7 @@ export type DecorateProcedure< TData = inferProcedureOutput >( input: () => inferProcedureInput, - opts?: () => UseTRPCQueryOptions< + opts?: UseTRPCQueryOptions< TPath, inferProcedureInput, TQueryFnData, @@ -60,7 +60,7 @@ export type DecorateProcedure< TData = inferProcedureOutput >( input: () => Omit, "cursor">, - opts?: () => UseTRPCInfiniteQueryOptions< + opts?: UseTRPCInfiniteQueryOptions< TPath, inferProcedureInput, TData, @@ -75,7 +75,7 @@ export type DecorateProcedure< : TProcedure extends AnyMutationProcedure ? { useMutation: ( - opts?: () => UseTRPCMutationOptions< + opts?: UseTRPCMutationOptions< inferProcedureInput, TRPCClientErrorLike, inferProcedureOutput, @@ -92,7 +92,7 @@ export type DecorateProcedure< ? { useSubscription: ( input: () => inferProcedureInput, - opts?: () => UseTRPCSubscriptionOptions< + opts?: UseTRPCSubscriptionOptions< inferObservableValue>, TRPCClientErrorLike > diff --git a/src/shared/hooks/createHooksInternal.tsx b/src/shared/hooks/createHooksInternal.tsx index 757e90b..29cc0d1 100644 --- a/src/shared/hooks/createHooksInternal.tsx +++ b/src/shared/hooks/createHooksInternal.tsx @@ -376,7 +376,7 @@ export function createHooksInternal< path: TPath, ...args: inferHandlerInput ], - opts?: () => UseTRPCQueryOptions< + opts?: UseTRPCQueryOptions< TPath, TQueryValues[TPath]["input"], TQueryFnData, @@ -385,25 +385,26 @@ export function createHooksInternal< > ): UseTRPCQueryResult { const ctx = useContext(); + // createEffect(() => console.log("opts", opts?.())); if ( typeof window === "undefined" && ctx.ssrState() === "prepass" && - opts?.().trpc?.ssr !== false && - opts?.().enabled !== false && + opts?.trpc?.ssr !== false && + opts?.enabled !== false && !ctx.queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput())) ) { - void ctx.prefetchQuery(pathAndInput(), opts?.() as any); + void ctx.prefetchQuery(pathAndInput(), opts as any); } const shouldAbortOnUnmount = () => - opts?.().trpc?.abortOnUnmount ?? ctx?.abortOnUnmount ?? false; + opts?.trpc?.abortOnUnmount ?? ctx?.abortOnUnmount ?? false; const hook = __useQuery( () => getArrayQueryKey(pathAndInput()), (queryFunctionContext) => { const actualOpts = () => ({ - ...opts?.(), + ...opts, trpc: { - ...opts?.()?.trpc, + ...opts?.trpc, ...(shouldAbortOnUnmount() ? { signal: queryFunctionContext.signal } : {}), @@ -413,7 +414,7 @@ export function createHooksInternal< ...getClientArgs(pathAndInput(), actualOpts()) ); }, - { context: SolidQueryContext, ...opts?.() } as any + opts as any ) as UseTRPCQueryResult; hook.trpc = useHookResult({ path: pathAndInput()[0], @@ -426,7 +427,7 @@ export function createHooksInternal< TContext = unknown >( path: TPath | [TPath], - opts?: () => UseTRPCMutationOptions< + opts?: UseTRPCMutationOptions< TMutationValues[TPath]["input"], TError, TMutationValues[TPath]["output"], @@ -446,14 +447,14 @@ export function createHooksInternal< const actualPath = Array.isArray(path) ? path[0] : path; return (ctx.client.mutation as any)( - ...getClientArgs([actualPath, input], opts?.()) + ...getClientArgs([actualPath, input], opts) ); }, { context: SolidQueryContext, - ...opts?.(), + ...opts, onSuccess(...args) { - const originalFn = () => opts?.().onSuccess?.(...args); + const originalFn = () => opts?.onSuccess?.(...args); return mutationSuccessOverride({ originalFn, queryClient }); }, } @@ -485,16 +486,15 @@ export function createHooksInternal< path: TPath, ...args: inferHandlerInput ], - opts: () => UseTRPCSubscriptionOptions< + opts: UseTRPCSubscriptionOptions< inferObservableValue>, inferProcedureClientError > ) { - const enabled = opts?.().enabled ?? true; const ctx = useContext(); return createEffect(() => { - if (!enabled) { + if (!(opts.enabled ?? true)) { return; } // noop @@ -510,17 +510,17 @@ export function createHooksInternal< >(pathAndInput()[0], (pathAndInput()[1] ?? undefined) as any, { onStarted: () => { if (!isStopped) { - opts?.().onStarted?.(); + opts?.onStarted?.(); } }, onData: (data) => { if (!isStopped) { - opts().onData(data); + opts?.onData(data); } }, onError: (err) => { if (!isStopped) { - opts().onError?.(err); + opts?.onError?.(err); } }, }); @@ -536,7 +536,7 @@ export function createHooksInternal< path: TPath, input: Omit ], - opts?: () => UseTRPCInfiniteQueryOptions< + opts?: UseTRPCInfiniteQueryOptions< TPath, Omit, TQueryValues[TPath]["output"], @@ -548,18 +548,18 @@ export function createHooksInternal< if ( typeof window === "undefined" && ctx.ssrState() === "prepass" && - opts?.()?.trpc?.ssr !== false && - opts?.()?.enabled !== false && + opts?.trpc?.ssr !== false && + opts?.enabled !== false && !ctx.queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput())) ) { void ctx.prefetchInfiniteQuery(pathAndInput as any, opts as any); } - const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput(), opts?.()); + const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput(), opts); // request option should take priority over global const shouldAbortOnUnmount = - opts?.()?.trpc?.abortOnUnmount ?? ctx?.abortOnUnmount ?? false; + opts?.trpc?.abortOnUnmount ?? ctx?.abortOnUnmount ?? false; const hook = __useInfiniteQuery( () => getArrayQueryKey(pathAndInput()),