react hooks not using data transformer

I’ve setup my react project according to the docs, but when I use the hooks, it doesn’t seem to use the data transformer.

Here is my trpc setup

import type { Router } from '..'
import superjson from 'superjson'

export const trpc = createReactQueryHooks<Router>()

export const trpcClient = trpc.createClient({
	url: 'http://localhost:8080',
	transformer: superjson,
	headers: () => ({ Authorization: getAuthHeader() }),
})

export const queryClient = new QueryClient({
	defaultOptions: {
		queries: { refetchOnWindowFocus: false, retry: false, refetchOnMount: false },
		mutations: { retry: false },
	},
})

ReactDOM.render(
	<React.StrictMode>
		<trpc.Provider client={trpcClient} queryClient={queryClient}>
			<QueryClientProvider client={queryClient}>
				<App />
			</QueryClientProvider>
		</trpc.Provider>
	</React.StrictMode>,
	document.getElementById('root')
)

And this is how I am using the hooks inside the

const AppHeader: React.FC = () => {
	const { data: school, isLoading } = trpc.useQuery([
		'school.get',
		{ id: schoolId }, //schoolId is a bigint here
	])

	return <></>
}

And i’m getting this error Uncaught TypeError: BigInt value can't be serialized in JSON which shouldn’t happen if the transformer was being called.

[benbaldwin000]

just put this together sandbox

[jlalmes]

Excellent @sachinraja! So to be clear the solution is as follows (tested):

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryKeyHashFn: (queryKey) => {
        return JSON.stringify(superjson.serialize(queryKey))
      },
    },
  },
});