Registry /
ai-ml / react-query-grpc-gateway
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
ServiceContext
✓ import { ServiceContext } from 'react-query-grpc-gateway'
✗ import { ServiceContextProvider } from 'react-query-grpc-gateway'
Export name is ServiceContext, not ServiceContextProvider. Use .Provider inside.
useServiceQuery
✓ import { useServiceQuery } from 'react-query-grpc-gateway'
✗ import useServiceQuery from 'react-query-grpc-gateway'
Named export only (ESM). No default export.
useServiceMutation
✓ import { useServiceMutation } from 'react-query-grpc-gateway'
✗ const { useServiceMutation } = require('react-query-grpc-gateway')
Named export. CommonJS require will not work for this ESM-only package.
sideEffect
✓ import { sideEffect } from 'react-query-grpc-gateway'
Utility function for chaining mutation side effects. Also named export.
Setting up the provider, using useServiceQuery for a GET request, and using useServiceMutation with sideEffect for optimistic updates and cache invalidation.
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ServiceContext, useServiceQuery, useServiceMutation, sideEffect } from 'react-query-grpc-gateway';
import { getUser, updateUser, getUserList } from './generated-client'; // from protoc-gen-grpc-gateway-ts
const queryClient = new QueryClient();
const requestOptions = {
pathPrefix: process.env.API_HOST ?? 'http://localhost:8080',
credentials: 'include',
headers: { 'X-CSRF-Protection': '1' },
};
function AppProviders({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>
<ServiceContext.Provider value={requestOptions}>
{children}
</ServiceContext.Provider>
</QueryClientProvider>
);
}
function UserProfilePage({ userID }: { userID: string }) {
const { data, isLoading, error } = useServiceQuery(getUser, { id: userID });
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>User: {data?.name}</div>;
}
function useUpdateUser() {
return useServiceMutation(updateUser, {
...sideEffect(getUser, {
mapKey: (update) => ({ id: update.id }),
patchFn: (oldData, variables) => ({ ...oldData, name: variables.name }),
updateFn: (oldData, response) => response,
}),
...sideEffect(getUserList, {
mapKey: () => null,
invalidate: true,
}),
});
}
Errors
Common errors & fixes
Cannot find module 'react-query-grpc-gateway' or its corresponding type declarations.
Missing installation or TypeScript not resolving the package.
fixnpm install react-query-grpc-gateway @tanstack/react-query@^5.35.1
Property 'pathPrefix' does not exist on type 'RequestOptions'
TypeScript requires proper client generation; pathPrefix is not a standard fetch property.
fixEnsure you have installed protoc-gen-grpc-gateway-ts and generated the client. PathPrefix is available on the generated request configuration.
Uncaught TypeError: serviceContext is not a function
Using ServiceContext as a function instead of as an object with .Provider.
fixUse <ServiceContext.Provider value={...}> in JSX, not ServiceContext({...}). Audit
Dependencies
@tanstack/react-queryrequiredpeer dependency for query hooks (useQuery, useMutation)