Hybrids: Subscription Factory
Use the subscription factory to add a GraphQL subscription to you hybrids element.
import { subscription, define, html } from '@apollo-elements/hybrids';
import { UserAddedSubscription } from './UserAdded.subscription.graphql.js';
import '@material/mwc-snackbar';
define('user-added', {
userAdded: subscription(UserAddedSubscription),
opened: false,
render: host => html`
<link rel="stylesheet" href="user-added.css">
<mwc-snackbar
labeltext="${host.userAdded.data?.name} Joined!"
open="${host.last !== host.userAdded.data?.name}"
onMDCSnackbar:closed="${() => host.opened = false}"
onMDCSnackbar:opened="${() => {
host.opened = true;
host.last = host.userAdded.data?.name;
}}"
></mwc-snackbar>
`,
});
:host {
display: block;
}
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 type="module" src="client.js"></script>
<script type="module" src="user-added.js"></script>
<user-added></user-added>
<button disabled>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 { EventIterator } 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: () => EventIterator.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: addMocksToSchema({
preserveResolvers: true,
store,
schema,
}),
}),
});
window.__APOLLO_CLIENT__ = client;
subscription
Hybrids property descriptor factory for GraphQL subscriptions.
Parameters
subscriptionDocument
ComponentDocument<D> | null
The subscription document.
options
ApolloSubscriptionControllerOptions<D, V>
Options to control the subscription.
| 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
Exports
import { subscription } from '@apollo-elements/hybrids/factories/subscription';