You don't need Graphql

API needs

1. How do we ensure components get the data they need?
2. How do we avoiding fetching more data than necessary?
3. How do we avoid fetching the same data multiple times?
4. How do we ensure that when components are moved or reused that their data dependencies are still fulfilled?

How do we ensure components get the data they need?

import React, { Component, PropTypes } from 'react';

var Formats = props => 
  <div>
    {props.data.formats.map(format => (
      <Format 
        key={format.id} 
        image={format.image} 
        title={format.title} 
      />
    ))}
  </div>
);

Formats.propTypes = {
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    formats: PropTypes.arrayOf(...),
  }).isRequired,
};


export default Format;

How do we ensure components get the data they need?

import { connect } from 'react-redux';

import Formats from './formats';

var mapStateToProps = state => ({
  formats: getFormats({ country: 'GB', bookLocale: 'en-GB' })
});
  

var ProfileWithData = connect(mapStateToProps)(Formats);

How do we ensure components get the data they need?

import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import Formats from './formats';

var FormatsForDrawer = gql`
  query Formats(country: 'GB', bookLocale: 'en-GB') {
    id,
    imageUrl,
    title
  }
`;

var ProfileWithData = graphql(FormatsForDrawer)(Formats);

How do we ensure components get the data they need?

import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import Formats from './formats';

var FormatsForDrawer = gql`
  query Formats(country: 'GB', bookLocale: 'en-GB') {
    id,
    imageUrl,
    title
  }
`;

var enhance = compose(
  connect(/* redux stuff */),
  graphql(FormatsForDrawer)
);

var ProfileWithData = enhance(Formats);