I have issues creating a story of a component that is using trpc. Storybook is running, but when I open the story I get the following error:
Cannot destructure property 'client' of 'useContext(...)' as it is null. TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null. at Object.useMutation$1 [as useMutation] (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_defineProperty_js-node_modules_trpc_next_dist_-afeaa2.iframe.bundle.js:6209:17) at http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_defineProperty_js-node_modules_trpc_next_dist_-afeaa2.iframe.bundle.js:5884:34 at Object.apply (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_defineProperty_js-node_modules_trpc_next_dist_-afeaa2.iframe.bundle.js:6583:20) at PostSettings (http://localhost:6006/stories-components-feed-postPreview-HeaderPostPreview-stories.iframe.bundle.js:401:92) at renderWithHooks (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-86a76a.iframe.bundle.js:83400:18) at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-86a76a.iframe.bundle.js:87164:13) at beginWork (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-86a76a.iframe.bundle.js:88677:16) at beginWork$1 (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-86a76a.iframe.bundle.js:94516:14) at performUnitOfWork (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-86a76a.iframe.bundle.js:93647:12) at workLoopSync (http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-86a76a.iframe.bundle.js:93556:5)
@utils/trpc - comes from t3-app
import { httpBatchLink, loggerLink } from '@trpc/client'
import { createTRPCNext } from '@trpc/next'
import { type inferRouterInputs, type inferRouterOutputs } from '@trpc/server'
import superjson from 'superjson'
import { IN_DEV } from '@constants/app'
import { type AppRouter } from '@server/trpc/router/_app'
const getBaseUrl = () => {
if (typeof window !== 'undefined') return '' // browser should use relative url
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}` // SSR should use vercel url
return `http://localhost:${process.env.PORT ?? 3000}` // dev SSR should use localhost
}
export const trpc = createTRPCNext<AppRouter>({
config() {
return {
transformer: superjson,
links: [
loggerLink({
enabled: (opts) =>
IN_DEV ||
(opts.direction === 'down' && opts.result instanceof Error),
}),
httpBatchLink({
url: `${getBaseUrl()}/api/trpc`,
}),
],
}
},
ssr: false,
})
/**
* Inference helper for inputs
* @example type HelloInput = RouterInputs['example']['hello']
**/
export type RouterInputs = inferRouterInputs<AppRouter>
/**
* Inference helper for outputs
* @example type HelloOutput = RouterOutputs['example']['hello']
**/
export type RouterOutputs = inferRouterOutputs<AppRouter>
PostPreview.stories.tsx
import React from 'react'
import type { StoryFn, Meta } from '@storybook/react'
import { trpc } from '@utils/trpc'
const PostPreview = () => {
const { data, status } = trpc.post.getAll.useQuery()
if (status === 'loading') {
return <p>loading</p>
}
if (status === 'error' || !data) {
return <p>error</p>
}
return <div>{JSON.stringify(data)}</div>
}
export default {
title: 'Library/PostPreview',
component: PostPreview,
argTypes: {},
} as Meta<typeof PostPreview>
const Template: StoryFn<typeof PostPreview> = () => ( <PostPreview />
)
export const Standard = Template.bind({})
1条答案
按热度按时间kxkpmulp1#
在testerez解决方案的帮助下使其工作
@故事/模拟/trpc
MyStory.stories.tsx