> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Class: BijectionReactClient

> A Bijection client for use within React.

[react](/api/modules/react).BijectionReactClient

A Bijection client for use within React.

This loads reactive queries and executes mutations over a WebSocket.

## Constructors

### constructor

• **new BijectionReactClient**(`address`, `options?`)

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `address` | `string` | The url of your Bijection deployment, often provided by an environment variable. E.g. `https://small-mouse-123.bijection.cloud`. |
| `options?` | [`BijectionReactClientOptions`](/api/interfaces/react.BijectionReactClientOptions) | See [BijectionReactClientOptions](/api/interfaces/react.BijectionReactClientOptions) for a full description. |

## Accessors

### url

• `get` **url**(): `string`

Return the address for this client, useful for creating a new client.

Not guaranteed to match the address with which this client was constructed:
it may be canonicalized.

#### Returns

`string`

***

### logger

• `get` **logger**(): `Logger`

Get the logger for this client.

#### Returns

`Logger`

The Logger for this client.

## Methods

### setAuth

▸ **setAuth**(`fetchToken`, `onChange?`, `onRefreshChange?`): `void`

Set the authentication token to be used for subsequent queries and mutations.
`fetchToken` will be called automatically again if a token expires.
`fetchToken` should return `null` if the token cannot be retrieved, for example
when the user's rights were permanently revoked.

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `fetchToken` | [`AuthTokenFetcher`](/api/modules/browser#authtokenfetcher) | an async function returning the JWT-encoded OpenID Connect Identity Token |
| `onChange?` | (`isAuthenticated`: `boolean`) => `void` | a callback that will be called when the authentication status changes |
| `onRefreshChange?` | (`isRefreshing`: `boolean`) => `void` | a callback called with `true` when the socket is paused to fetch a replacement token after a server rejection, and `false` when refresh completes |

#### Returns

`void`

***

### clearAuth

▸ **clearAuth**(): `void`

Clear the current authentication token if set.

#### Returns

`void`

***

### watchQuery

▸ **watchQuery**\<`Query`>(`query`, `...argsAndOptions`): [`Watch`](/api/interfaces/react.Watch)\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>>

Construct a new [Watch](/api/interfaces/react.Watch) on a Bijection query function.

**Most application code should not call this method directly. Instead use
the [useQuery](/api/modules/react#usequery) hook.**

The act of creating a watch does nothing, a Watch is stateless.

#### Type parameters

| Name | Type |
| :- | :- |
| `Query` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"query"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"query"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `query` | `Query` | A [FunctionReference](/api/modules/server#functionreference) for the public query to run. |
| `...argsAndOptions` | [`ArgsAndOptions`](/api/modules/server#argsandoptions)\<`Query`, [`WatchQueryOptions`](/api/interfaces/react.WatchQueryOptions)> | - |

#### Returns

[`Watch`](/api/interfaces/react.Watch)\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>>

The [Watch](/api/interfaces/react.Watch) object.

***

### prewarmQuery

▸ **prewarmQuery**\<`Query`>(`queryOptions`): `void`

Indicates likely future interest in a query subscription.

The implementation currently immediately subscribes to a query. In the future this method
may prioritize some queries over others, fetch the query result without subscribing, or
do nothing in slow network connections or high load scenarios.

To use this in a React component, call useQuery() and ignore the return value.

#### Type parameters

| Name | Type |
| :- | :- |
| `Query` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"query"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"query"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `queryOptions` | [`QueryOptions`](/api/modules/browser#queryoptions)\<`Query`> & \{ `extendSubscriptionFor?`: `number`  } | A query (function reference from an api object) and its args, plus an optional extendSubscriptionFor for how long to subscribe to the query. |

#### Returns

`void`

***

### mutation

▸ **mutation**\<`Mutation`>(`mutation`, `...argsAndOptions`): `Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Mutation`>>

Execute a mutation function.

#### Type parameters

| Name | Type |
| :- | :- |
| `Mutation` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"mutation"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"mutation"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `mutation` | `Mutation` | A [FunctionReference](/api/modules/server#functionreference) for the public mutation to run. |
| `...argsAndOptions` | [`ArgsAndOptions`](/api/modules/server#argsandoptions)\<`Mutation`, [`MutationOptions`](/api/interfaces/react.MutationOptions)\<[`FunctionArgs`](/api/modules/server#functionargs)\<`Mutation`>>> | - |

#### Returns

`Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Mutation`>>

A promise of the mutation's result.

***

### action

▸ **action**\<`Action`>(`action`, `...args`): `Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Action`>>

Execute an action function.

#### Type parameters

| Name | Type |
| :- | :- |
| `Action` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"action"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"action"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `action` | `Action` | A [FunctionReference](/api/modules/server#functionreference) for the public action to run. |
| `...args` | [`OptionalRestArgs`](/api/modules/server#optionalrestargs)\<`Action`> | An arguments object for the action. If this is omitted, the arguments will be `{}`. |

#### Returns

`Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Action`>>

A promise of the action's result.

***

### query

▸ **query**\<`Query`>(`query`, `...args`): `Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>>

Fetch a query result once.

**Most application code should subscribe to queries instead, using
the [useQuery](/api/modules/react#usequery) hook.**

#### Type parameters

| Name | Type |
| :- | :- |
| `Query` | extends [`FunctionReference`](/api/modules/server#functionreference)\<`"query"`> \| [`FunctionReference_future`](/api/modules/server#functionreference_future)\<`"query"`> |

#### Parameters

| Name | Type | Description |
| :- | :- | :- |
| `query` | `Query` | A [FunctionReference](/api/modules/server#functionreference) for the public query to run. |
| `...args` | [`OptionalRestArgs`](/api/modules/server#optionalrestargs)\<`Query`> | An arguments object for the query. If this is omitted, the arguments will be `{}`. |

#### Returns

`Promise`\<[`FunctionReturnType`](/api/modules/server#functionreturntype)\<`Query`>>

A promise of the query's result.

***

### connectionState

▸ **connectionState**(): [`ConnectionState`](/api/modules/browser#connectionstate)

Get the current [ConnectionState](/api/modules/browser#connectionstate) between the client and the Bijection
backend.

#### Returns

[`ConnectionState`](/api/modules/browser#connectionstate)

The [ConnectionState](/api/modules/browser#connectionstate) with the Bijection backend.

***

### subscribeToConnectionState

▸ **subscribeToConnectionState**(`cb`): () => `void`

Subscribe to the [ConnectionState](/api/modules/browser#connectionstate) between the client and the Bijection
backend, calling a callback each time it changes.

Subscribed callbacks will be called when any part of ConnectionState changes.
ConnectionState may grow in future versions (e.g. to provide a array of
inflight requests) in which case callbacks would be called more frequently.
ConnectionState may also *lose* properties in future versions as we figure
out what information is most useful. As such this API is considered unstable.

#### Parameters

| Name | Type |
| :- | :- |
| `cb` | (`connectionState`: [`ConnectionState`](/api/modules/browser#connectionstate)) => `void` |

#### Returns

`fn`

An unsubscribe function to stop listening.

▸ (): `void`

Subscribe to the [ConnectionState](/api/modules/browser#connectionstate) between the client and the Bijection
backend, calling a callback each time it changes.

Subscribed callbacks will be called when any part of ConnectionState changes.
ConnectionState may grow in future versions (e.g. to provide a array of
inflight requests) in which case callbacks would be called more frequently.
ConnectionState may also *lose* properties in future versions as we figure
out what information is most useful. As such this API is considered unstable.

##### Returns

`void`

An unsubscribe function to stop listening.

***

### close

▸ **close**(): `Promise`\<`void`>

Close any network handles associated with this client and stop all subscriptions.

Call this method when you're done with a [BijectionReactClient](/api/classes/react.BijectionReactClient) to
dispose of its sockets and resources.

#### Returns

`Promise`\<`void`>

A `Promise` fulfilled when the connection has been completely closed.
