Go realtime with GraphQL Subscriptions

Meetup GraphQL Paris - @ eFounders
5 September 2017

Transcript

1. GraphQL Meetup
   Go realtime with subscriptions
   

   View Slide

2. Y U NO realtime?
   

   View Slide

3. Concept
   

   View Slide

4. Subscriptions Concept
   • Channel based events
   • Usage of GraphQL Schema
   • Connection
   • Subscription
   

   View Slide

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!
   }
   

   View Slide

6. MIND. BLOWN.
   

   View Slide

7. Server-side
   

   View Slide

8. View Slide

9. View Slide

10. SubscriptionServer
    • Track Client
    • Send keep-alive
    • Execute our GraphQL Schema
    • Manage connections
    

    View Slide

11. Pubsub
    • Object to publish data
    • Use to aggregate events
    • Use to filtering before sending data
    • Can use Redis or InMemory or RabbitMQ
    

    View Slide

12. Filters and Permissions
    Publish event with data and audience
    Resolve subscription and filter to allowed users
    

    View Slide

13. Client-side
    

    View Slide

14. - React Relay: Easy and straightforward
    - Apollo: Not tied up with React with
    special packages for React, Angular
    etc…
    

    View Slide

15. - React Relay: Easy and straightforward
    - Apollo: Not tied up with React with
    special packages for React, Angular
    etc…
    

    View Slide

16. import { SubscriptionClient, addGraphQLSubscriptions } from
    'subscriptions-transport-ws'
    

    

    const networkInterface = createNetworkInterface({
    uri: 'https://api.graph.cool/simple/v1/'
    })
    const wsClient = new SubscriptionClient('__SUBSCRIPTION_API_ENDPOINT__', {
    reconnect: true,
    })
    const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient
    )
    const client = new ApolloClient({
    networkInterface: networkInterfaceWithSubscriptions
    })
    Apollo Setup
    

    View Slide

17. View Slide

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 :)
    }
    })
    }
    

    View Slide

19. « It just works ™ »
    Arnaud Rinquin
    9 Juin 2017
    

    View Slide

20. DEMO
    

    View Slide

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
    

    View Slide

22. ✨Thanks
    Request an early access slite.com
    

    View Slide