stubailo

import gql from 'graphql-tag';
import graphql from 'graphql-anywhere';

// I don't need all this stuff!
const gitHubAPIResponse = {
  "url": "https://api.github.com/repos/octocat/Hello-World/issues/1347",
  "title": "Found a bug",
  "body": "I'm having a problem with this.",
  "user": {
    "login": "octocat",

stubailo

const data = {
  result: [1, 2],
  entities: {
    articles: {
      1: { id: 1, title: 'Some Article', author: 1 },
      2: { id: 2, title: 'Other Article', author: 1 },
    },
    users: {
      1: { id: 1, name: 'Dan' },
    },

stubailo

import { propType } from 'graphql-anywhere';

const CommentView = ({ comment }) => (
  <div>
    <p>{ comment.content }</p>
    <p>Posted by { comment.postedBy.login } on {comment.createdAt }</p>
  </div>
);

CommentView.commentFragment = gql`

stubailo

// Quick idea. I love doc comments, but it's annoying that you need to repeat all of the
// argument names again, just to document them. It's easy for parameter lists to fall out
// of date. Plus, if you're using a typed language a lot of the information is already
// there. Is there a tool to parse comments like the below?

/** Create a Redux store. Using this function as a convenient example. */
function createStore(
  /** A reducer function that maps the previous state and current action to the next state. */
  reducer: ReducerFunction,
   

stubailo

query HeroName($episode: Episode) {
  hero(episode: $episode) {
    ...DescribeHero
  }
}

fragment DescribeHero on Character {
  name
  appearsIn
}

stubailo

import React from 'react';
import { withState, pure, compose } from 'recompose';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { Link } from 'react-router';

// The data prop, which is provided by the wrapper below, contains
// a `loading` key while the query is in flight, and the bookSearch
// results when they are ready
const BookSearchResultsPure = ({ data: { loading, bookSearch } }) => {

stubailo

import React from 'react';
import { pure, branch, renderComponent, compose } from 'recompose';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { Link } from 'react-router';

// Define a very basic loading state component - you could make this
// a nice animation or something
const Loading = () => (
  <div>Loading</div>

stubailo

// Result 1
{
  "data": {
    "commentAdded": {
      "comment": {
        "id": "abc123",
        "content": "GraphQL subscriptions will be awesome!",
        "author": { "username": "sashko" }        
      }
    }

stubailo

// Some component that defines a fragment
Greeting = Relay.createContainer(Greeting, {
  fragments: {
    greetings: () => Relay.QL`
      fragment on Greetings {
        hello
      }
    `,
  },
});

stubailo

// Some component that defines a fragment
Greeting = createFragmentContainer(Greeting, graphql`
  fragment Greeting_greeting on Greetings {
    hello
  }
`);

// Some other component that uses the fragment from above
App = createFragmentContainer(App, graphql`
  fragment App_greetings on Greetings {