Go realtime with GraphQL Subscriptions

Meetup GraphQL Paris - @ eFounders
5 September 2017

Transcript

1. GraphQL Meetup Go realtime with subscriptions
2. Y U NO realtime?
3. Concept
4. Subscriptions Concept • Channel based events • Usage of GraphQL Schema • Connection • Subscription
5. Subscriptions Concept • Events based • Usage of GraphQL Schema • Connection • Subscription type Channel { id: ID! createdAt: Date! name: String! isFavorite: Boolean! } extend type Subscription { channelCreated: Channel! channelUpdated: Channel! channelDeleted: Channel! }
6. MIND. BLOWN.
7. Server-side
10. SubscriptionServer • Track Client • Send keep-alive • Execute our GraphQL Schema • Manage connections
11. Pubsub • Object to publish data • Use to aggregate events • Use to filtering before sending data • Can use Redis or InMemory or RabbitMQ
12. Filters and Permissions Publish event with data and audience Resolve subscription and filter to allowed users
13. Client-side
14. - React Relay: Easy and straightforward - Apollo: Not tied up with React with special packages for React, Angular etc…
15. - React Relay: Easy and straightforward - Apollo: Not tied up with React with special packages for React, Angular etc…
16. import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws' 
 
 const networkInterface = createNetworkInterface({ uri: 'https://api.graph.cool/simple/v1/<project-id>' }) const wsClient = new SubscriptionClient('__SUBSCRIPTION_API_ENDPOINT__', { reconnect: true, }) const networkInterfaceWithSubscriptions = addGraphQLSubscriptions( networkInterface, wsClient ) const client = new ApolloClient({ networkInterface: networkInterfaceWithSubscriptions }) Apollo Setup
18. Listen and receive data _subscribeToNewChannels = () => { this.props.channelsQuery.subscribeTo({ document: gql` subscription { channelCreated { id createdAt name isFavorite } } `, updateQuery: (previous, { subscriptionData }) => { // Dispatch your subscription data :) } }) }
19. « It just works ™ » Arnaud Rinquin 9 Juin 2017
20. DEMO
21. Go further How to - https://www.howtographql.com/react-apollo/8-subscriptions/ RFC - https://github.com/facebook/graphql/blob/master/rfcs/Subscriptions.md Demo - https://blog.graph.cool/how-to-build-a-real-time-chat-with-graphql- subscriptions-and-apollo-d4004369b0d4
22. ✨Thanks Request an early access slite.com