Atomico: useSubscription
Apollo useSubscription hook for web components.
Read the subscription component guides for examples and tips.
import { useSubscription, useState, c, html, css } from '@apollo-elements/atomico';
import { client } from './client.js';
import { UserAddedSubscription } from './UserAdded.subscription.graphql.js';
import '@material/mwc-snackbar';
function UserAdded() {
const [last, setLast] = useState('');
const [opened, setOpened] = useState(false);
const { data } = useSubscription(UserAddedSubscription, {
client,
onData({ subscriptionData }) {
setLast(subscriptionData.data.userAdded.name);
setOpened(true);
},
});
return html`
<host shadowDom>
<mwc-snackbar
labeltext="${data?.name} Joined!"
open=${opened}
></mwc-snackbar>
</host>
`;
};
UserAdded.styles = css`
:host {
display: block;
}
`;
customElements.define('user-added', c(UserAdded));
import type { User } from './client';
import type { TypedDocumentNode } from '@apollo/client/core';
import { gql } from '@apollo/client/core';
export const UserAddedSubscription: TypedDocumentNode<{ userAdded: User }> = gql`
subscription UserAddedSubscription {
userAdded {
id
name
}
}
`;
<script>window.process=window.process||{env: {}}</script>
<script type="module" src="user-added.js"></script>
<user-added></user-added>
<button>Add User</button>
<small><em>This demo is blocked by an <a target="_blank" rel="nofollow noreferer" href="https://github.com/apollographql/apollo-feature-requests/issues/299">issue in <code>SchemaLink</code></a>.</small>
import { SchemaLink } from '@apollo/client/link/schema';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { addMocksToSchema, createMockStore } from '@graphql-tools/mock';
import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import { subscribe } from 'event-iterator';
export interface User {
id: number;
name: string;
status?: 'DELETED';
};
const typeDefs = `
type User {
name: String
id: ID
}
type Subscription {
userAdded: User
}
schema {
subscription: Subscription
}
`;
const USERS: User[] = [
{ id: 1, name: 'Neil' }
];
const getNextUserId = () => Math.max(...USERS.map(x => x.id)) + 1;
const schema = makeExecutableSchema({
typeDefs,
resolvers: {
Subscription: {
userAdded: {
subscribe: () => subscribe.call(document.querySelector('button'), 'click'),
resolve: () => makeNextUser()
}
}
}
});
const store = createMockStore({ schema });
function makeNextUser() {
const id = getNextUserId();
return {
name: store.get('User', id, 'name'),
id: store.get('User', id, 'id'),
};
}
export const client = new ApolloClient({
cache: new InMemoryCache(),
link: new SchemaLink({ schema }),
});
useSubscription
Parameters
query
ComponentDocument<D, V>
options
ApolloSubscriptionControllerOptions<D, V>
| Option | Type | Description |
|---|---|---|
| client | ApolloClient |
ApolloClient instance for the subscription. |
| fetchPolicy | FetchPolicy |
See fetchPolicy |
| noAutoSubscribe | boolean |
If set, the component will not subscribe until called explicitly. See noAutoSubscribe |
| onError | (error: ApolloError) => void |
Callback for when subscription produces an error |
| onData | (result: OnSubscriptionDataParams<Data<D>>) => void |
Callback for when subscription produces new data |
| onSubscriptionComplete | () => void |
Callback for when the subscription ends |
| shouldResubscribe | boolean |
Determines if your subscription should be unsubscribed and subscribed again |
| shouldSubscribe | (op?: Partial<Operation<D, V>>) => boolean |
Predicate which determines whether to automatically subscribe. See shouldSubscribe |
| skip | boolean |
When true, the subscription will not fetch at all. |
| subscription | DocumentNode |
Subscription GraphQL Document |
| variables | Variables<D, V> |
Subscription variables |
Inherits from ApolloControllerOptions
Returns
ApolloSubscriptionController<D, V>
Exports
import { useSubscription } from '@apollo-elements/atomico/useSubscription';