https://github.com/launchscout/react-apollo-subscribed-query

Wraps a react component a query and a subscription that updates it
https://github.com/launchscout/react-apollo-subscribed-query

apollo apollographql graphql react

Last synced: 5 months ago
JSON representation

Wraps a react component a query and a subscription that updates it

• Host: GitHub
• URL: https://github.com/launchscout/react-apollo-subscribed-query
• Owner: launchscout
• License: mit
• Created: 2017-09-25T17:37:26.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-25T18:00:52.000Z (almost 9 years ago)
• Last Synced: 2024-04-23T23:14:37.677Z (over 2 years ago)
• Topics: apollo, apollographql, graphql, react
• Language: JavaScript
• Size: 3.91 KB
• Stars: 5
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-apollo-subscribed-query

This module exports a single function that you can use like so

to wrap a React component with a graphql query and a subscription

that will update its results.

## Example

```javascript

import React, { Component } from 'react';

import {

  ApolloClient,

  gql,

  graphql,

  ApolloProvider,

} from 'react-apollo';

import ProcessOrder from './ProcessOrder';

import graphqlSubscribedQuery from 'react-apollo-subscribed-query';

class OrderDetail extends Component {

  render() {

    const {match} = this.props;

    const {loading, error, order} = this.props.data;

    if (loading) {

     return 
Loading ...
;

    }

    if (error) {

     return 
{error.message}
;

    }

    return (

      


        


          
Purchase Order Number

          
{order.purchaseOrderNumber}

        

        


          
Status

          
{order.status}

        

        


          
Production Quantity

          
{order.productionQuantity}

        

        


          
Test Quantity

          
{order.testQuantity}

        

        


          
Item Schema

          
{order.itemSchema}

        

        

      

    );

  }

}


export const orderQuery = gql`

   query OrderQuery($orderId: ID) {

     order(orderId: $orderId) {

       id

       purchaseOrderNumber

       status

       testQuantity

       productionQuantity

       itemSchema

     }

   }

 `;

export const orderSubscription = gql`

  subscription subscribeToOrders($orderId:ID!) {

    orderStatusChange(orderId: $orderId) {

      id

      status

      itemSchema

      testQuantity

      productionQuantity

      purchaseOrderNumber

    }

  }

`;

const OrderDetailWithQuery = graphqlSubscribedQuery({

  options: ({ match }) => ({ variables: { orderId: match.params.orderId } }),

  query: orderQuery,

  subscription: orderSubscription

})(OrderDetail);

export default OrderDetailWithQuery;

```

Caveats:

* query and subscription must take the same variables

* subscription data will replace query data

* This is really just a spike. It appears to work but there are no tests