This is the base implementation of the WunderGraph HTTP protocol in TypeScript that can be used on both browser and server environments. It's used as the base interface for the Web client, React and Next.js implementations.
Let's start by adding the WunderGraph TypeScript client generator to your project.
Create the client
createClient will return a fully typesafe client that can be used to execute operations.
The client can be configured with a custom baseURL.
You can use the client on server environments that don't have a build-in fetch implementation by using the customFetch configuration option.
Install node-fetch or any other fetch polyfill.
And add it to the client configuration.
If you target older browsers you will need a polyfill for fetch, AbortController, AbortSignal and possibly Promise.
Adding custom headers
Run a query
You can run subscriptions using
subscribeOnce, this will return the subscription response directly and will not setup a stream. This is useful for SSR purposes for example.
Almost all methods accept an AbortController instance that can be used to cancel the request.
Error handling (ClientResponseError)
The errors that can be returned from an operation are one of
GraphQLResponseError. These three errors compose the type union named
Network errors and non 2xx responses are returned as a
InputValidationError object and contain the status code through the
statusCode property. You can be sure that the request was successful if the method doesn't throw an error.
Query and mutation errors are returned as a
GraphQLResponseError object. By default, the first error specifies the error message, but you can access all GraphQL errors through the
Methods that initiate a network request throw a
ResponseError if the request fails to initiate or the response is not 2xx. Note that
ResponseError returns a single error and does not have an
If the source of failure was due to an invalid input, the error received will be an
InputValdationError. By default, the first error specifies the error message, but you can access all input validation errors through the
errors property is an array of errors with the following structure:
- Subscriptions are not supported server side, but can be fetched using