react-apollo

apollo-react

Use your GraphQL server data in your React components, with the Apollo Client.

• Example
• Install
• Provider
• connect
• Additional Props
• Using in concert with Redux

Documentation

Documentation for this client can be found here;

---

Example use:

import React from 'react';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { Provider } from 'apollo-react';

const networkInterface = createNetworkInterface('http://graphql-swapi.parseapp.com/');
const client = new ApolloClient({
  networkInterface,
});

function mapQueriesToProps({ ownProps, state }) {
  return {
    people: {
      query: `
        query people {
          allPeople(first: 10) {
            people {
              name
            }
          }
        }
      `,
      variables: {
        categoryId: 5,
      },
    },
  };
};

@connect({ mapQueriesToProps })
class StarWarsPeople extends React.Component {
  render() {
    const { allPeople } = this.props.people;
    return (
      <div>
        {allPeople.people.map((person, key) => (
          <div>
            <h1 key={key}>{person}</h1>
          </div>
        ))}
      </div>
    )
  }
};

ReactDOM.render(
  <Provider client={client}>
    <StarWarsPeople />
  </Provider>
  document.body
)

Install

npm install angular2-apollo --save

Running tests locally:

npm install
npm test

This project uses TypeScript for static typing and TSLint for linting. You can get both of these built into your editor with no configuration by opening this project in Visual Studio Code, an open source IDE which is available for free on all platforms.