Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Go realtime with GraphQL Subscriptions

Go realtime with GraphQL Subscriptions

Meetup GraphQL Paris - @ eFounders
5 September 2017

Pierre Renaudin

September 05, 2017
Tweet

More Decks by Pierre Renaudin

Other Decks in Technology

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