Go realtime with GraphQL Subscriptions

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

8. None
9. None

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
17. None

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