Go realtime with GraphQL Subscriptions

Go realtime with GraphQL Subscriptions

Meetup GraphQL Paris - @ eFounders
5 September 2017

C8ca9472c8318285fdbc31daa05cf698?s=128

Pierre Renaudin

September 05, 2017
Tweet

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