Class HyloApolloClient

A component which sets up an ApolloClient.

With this component you're able to connect to a GraphQL endpoint and run queries on it. It creates an ApolloClient instance including an ApolloChache instance.

You'll also be able to save local data into the ApolloCache.

To get access to the client and/or the cache, retrieve the element by using one of the select-element-functions of javascript like document.getElementById(). Then you can just use element.client or element.cache:

element = document.getElementById("hyloapolloclient_id");
element.client.query(...);
element.cashe.reset();

The client is getting initialised when the component will load. If you need to access the client before this, you need to create the client manually by calling createClient(). createClient() returns a Promise of the ApolloClient. Don't save the returned client for later use. In fact, never use a saved client, unless you know what you're doing. Always use element.client since the client might change at some point and if you would use a saved client, you wouldn't work on the current anymore but at the one current at the point you saved it. The same goes for the cashe.

Queries and Mutations
Using fragments
ApolloClient API

Queries are cached by the service worker by default. The request is always completed but the result is used to update the cache. If you don't want a cached result but a fresh result, add "_clear" to your query identifier (the cache is still be updated):

query myRequest_clear { myFunction { id }}

Mutations are never cached.

Index

Properties

cache

cache: ApolloCache<any>

The cache in use. If not set, it will be created as InMemoryCache instance. If changed, call createClient().

callDelay

callDelay: number = 100

The delay in milliseconds the call function waits to collect more requests before actually sending the request.

Each time a new call is collected the timer starts fresh.

client

client: default<any>

The ApolloClient instance.

credentials

credentials: string = 'same-origin'

A string representing the credentials policy you want for the fetch call. Resetting it, clears the cache. Possible values are: omit, include and same-origin.

errorPolicy

errorPolicy: "none" | "all" | "ignore" = 'all'

Error policy used for requests done by the hylo-apollo-client ("call" function). Has no influence on calls done directly through the apollo client.

graphQLErrorHandler

graphQLErrorHandler: Function

A function called if a GraphQL error occurs. Recieves an error argument of type ReadonlyArray of GraphQLError. If changed, call createClient().

Previously onGraphQLError

hasSw

hasSw: boolean = false

Indicates if a service worker is present. Is set by the component.

Trigger a new check by setting it to true.

localData

localData: {
[key: string]: any;
}

Object containing initial data.

Each key of the object will be saved as local data at every initialisation of the client. Updates when changed.

Type declaration

[key: string]: any

networkErrorHandler

networkErrorHandler: Function

A function called if a network error occurs. Recieves an error argument of type ApolloError. If changed, call createClient().

Previously onNetworkError

swData

swData: {
[key: string]: any;
}

Object containing initial data, which will be loaded from the service worker cache. If the service worker cache does not contain data for the given key, the given value will be saved to the service worker cache and local data.

The this.localData is set before and will overrule this.swData. The this.uri has to be defined and match the uri used in the service worker.

Type declaration

[key: string]: any

uri

uri: string

The uri to the endpoint of the Apollo Server. Defaults to "/graphql" if not set. Client will not initialise when set to "". Resetting it, clears the cache.

Methods

call

call(request, group_id?, group_counter?): Promise<any>
Calls the GraphQL server with the provided request and returns the response as promise. It's the equivalent of the apollo client.query call with a couple more improvements.

This function collects all calls in the duration of this.callDelay and bundles them into one request. Each additional call resets the delay. Duplicate GraphQL functions in the collected calls will be reduced to one to prevent unnecessary data transfer and database queries.

Only requests created by the GraphQLBuilder.createCall() function are permitted.

Calls can be grouped by setting the same group id with the calls. All calls with the same group id, done in the duration of the call delay, will be converted into one request. Calls with other group ids will become seperate requests and calls without a group id will form their own group.

GraphQl functions in calls grouped by the same group id will be compared only by their name. All calls to the same GraphQL function will be reduced to one no matter if their body differs!!! The body of the first encountered function with the same name will be used. Aliases are ignored.

GraphQL functions in calls without group id are compared by their body. If the calls include the same GraphQL functions but with different function bodies (requests with different attributes or properties), the functions will not be reduced to one but stay seperate in the request.

You can define how many members (calls) a group has. If you set a group counter, the call delay is ignored and the request waits until all calls of the id are made. If the calls of the same id have different group counter values, the highest counter will be used.

Besides the "data" object the returned response will also contain a "parsed" object. If a connection between a GraphQL function and a JSONParser set was previously defined by the JSONParser.addGraphQLToParser() function, the "parsed" object will contain the already parsed data. Keep in mind that all instances of the GraphQl function in the call group will reference the same "parsed" object!

To get a fresh result and not a cached, add "_clear" to your group_id.
Parameters
- request: any
  a GraphQL request created with GraphQLBuilder.createCall()
- Optional group_id: string
- group_counter: number = 0
  amount of calls for the given group
Returns Promise<any>

createClient

createClient(): Promise<default<any>>
Creates the client. Gets initialy called when the component will load, when not called before manually. Needs to be called when cache, graphQLErrorHandler or networkErrorHandler changed.

Will abort when "uri" is set to "".

Returns Promise<default<any>>

readData

readData(key, sw?, clear?): Promise<any>
Retrievs data from the ApolloClient cache which were saved previously by writeData() under the same key. The returned Promise resolves immediately if the data is not retrieved from the service worker cache.

You can force to look into the service worker cache for the data if the key is not found in the ApolloClient cache. Is the data retrieved from the service worker cache it will be saved into the ApolloClient cache for later use.

The this.uri has to be defined and match the uri used in the service worker in order to work with the service worker cache.
Parameters
- key: string
  the key for the data - must match the regular expression: /^[_A-Za-z][_0-9A-Za-z]*$/
- sw: boolean = false
  check the service worker cache if the key is not present in the ApolloClient cache
- clear: boolean = false
  clear the data of this key in the service worker cache
Returns Promise<any>

writeData

writeData(key, data, sw?): Promise<void>
Writes data into the ApolloClient cache. The key defines under which identifier the data is saved and can be used to retrieve the data again with readData(). Object data is converted into JSON and will be converted back by readData(). The returned Promise resolves immediately.

You can also have the data be saved into the service worker cache for storing it over multiple sessions. The this.uri has to be defined and match the uri used in the service worker in order to work with the service worker cache.
Parameters
- key: string
  the key - must match the regular expression: /^[_A-Za-z][_0-9A-Za-z]*$/
- data: any
  the data to be saved
- sw: boolean = false
  should the data also be saved into the service worker cache
Returns Promise<void>

Events

hyloApolloClientCreated

hyloApolloClientCreated: EventEmitter<default<any>>

Fires when the client got (re)created. Emits the created client which is the same as this.client.

hyloApolloClientDataWritten

hyloApolloClientDataWritten: EventEmitter<string>

Fires when local data gets written into the ApolloClient cache by writeData(). Emits the key under which the data is saved.

Class HyloApolloClient

Index

Properties

Methods

Events

Properties

cache

callDelay

client

credentials

errorPolicy

graphQLErrorHandler

hasSw

localData

Type declaration

[key: string]: any

networkErrorHandler

swData

Type declaration

[key: string]: any

uri

Methods

call

Parameters

request: any

Optional group_id: string

group_counter: number = 0

Returns Promise<any>

createClient

Returns Promise<default<any>>

readData

Parameters

key: string

sw: boolean = false

clear: boolean = false

Returns Promise<any>

writeData

Parameters

key: string

data: any

sw: boolean = false

Returns Promise<void>

Events

hyloApolloClientCreated

hyloApolloClientDataWritten

Settings

Member Visibility

Theme

On This Page

`Optional` group_id: string