Skip to content

Instantly share code, notes, and snippets.

@Oxyrus
Last active December 4, 2016 22:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Oxyrus/a3cd6f60bc4e7fae65a562192a63d679 to your computer and use it in GitHub Desktop.
Save Oxyrus/a3cd6f60bc4e7fae65a562192a63d679 to your computer and use it in GitHub Desktop.
Conexión desde React a GraphQL, la extensión real de los archivos es .js
import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
class App extends Component {
render() {
if (!this.props.data.posts) {
return null;
}
return (
<div>
<ul>
{this.props.data.posts.map(post =>
<li key={post.id}>
{post.title} by {post.user.name}
</li>
)}
</ul>
</div>
);
}
}
App.propTypes = {
data: PropTypes.shape({
loading: PropTypes.bool.isRequired,
postList: PropTypes.array,
}).isRequired,
};
const PostList = gql`
query GetPosts {
posts {
id
title
body
user {
name
}
}
}
`;
export const PostListWithData = graphql(PostList)(App);
import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { PostListWithData } from './App';
const client = new ApolloClient({
networkInterface: createNetworkInterface({ uri: 'https://elixir-oxyrus.c9users.io:8080/graphql' }),
});
ReactDOM.render(
<ApolloProvider client={client}>
<PostListWithData />
</ApolloProvider>,
document.getElementById('root')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment