@connectrpc/connect-query
Version:
TypeScript-first expansion pack for TanStack Query that gives you Protobuf superpowers.
58 lines • 3.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TransportProvider = exports.useTransport = exports.fallbackTransport = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const connect_1 = require("@connectrpc/connect");
const react_1 = require("react");
const fallbackTransportError = new connect_1.ConnectError("To use Connect, you must provide a `Transport`: a simple object that handles `unary` and `stream` requests. `Transport` objects can easily be created by using `@connectrpc/connect-web`'s exports `createConnectTransport` and `createGrpcWebTransport`. see: https://connectrpc.com/docs/web/getting-started for more info.");
// istanbul ignore next
exports.fallbackTransport = {
unary: () => {
throw fallbackTransportError;
},
stream: () => {
throw fallbackTransportError;
},
};
const transportContext = (0, react_1.createContext)(exports.fallbackTransport);
/**
* Use this helper to get the default transport that's currently attached to the React context for the calling component.
*/
const useTransport = () => (0, react_1.useContext)(transportContext);
exports.useTransport = useTransport;
/**
* `TransportProvider` is the main mechanism by which Connect-Query keeps track of the `Transport` used by your application.
*
* Broadly speaking, "transport" joins two concepts:
*
* 1. The protocol of communication. For this there are two options: the {@link https://connectrpc.com/docs/protocol/ Connect Protocol}, or the {@link https://github.com/grpc/grpc/blob/master/doc/PROTOCOL-WEB.md gRPC-Web Protocol}.
* 1. The protocol options. The primary important piece of information here is the `baseUrl`, but there are also other potentially critical options like request credentials and binary wire format encoding options.
*
* With these two pieces of information in hand, the transport provides the critical mechanism by which your app can make network requests.
*
* To learn more about the two modes of transport, take a look at the npm package `@connectrpc/connect-web`.
*
* To get started with Connect-Query, simply import a transport (either `createConnectTransport` or `createGrpcWebTransport` from `@connectrpc/connect-web`) and pass it to the provider.
*
* @example
* import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
* import { TransportProvider } from "@connectrpc/connect-query";
*
* const queryClient = new QueryClient();
*
* export const App() {
* const transport = createConnectTransport({
* baseUrl: "<your baseUrl here>",
* });
* return (
* <TransportProvider transport={transport}>
* <QueryClientProvider client={queryClient}>
* <YourApp />
* </QueryClientProvider>
* </TransportProvider>
* );
* }
*/
const TransportProvider = ({ children, transport }) => ((0, jsx_runtime_1.jsx)(transportContext.Provider, { value: transport, children: children }));
exports.TransportProvider = TransportProvider;
//# sourceMappingURL=use-transport.js.map