import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import { storiesOf } from "@storybook/react";

const userQuery = gql`
  query getUser = {
    currentUser {
      name
      lastAction {
        message
      }
      avatar
      city
    }
  }
`;

function CurrentUser() {
  return (
    <Query query={userQuery}>
      {({ loading, data }) => {
        const user = data && data.currentUser;
        if (loading) {
          return <h1>Loading one second please!</h1>;
        }
        return (
          <div>
            <img src={user.avatar} />
            <h1>
              {user.name}
              from {user.city}
              said "{user.lastAction.message}"{" "}
            </h1>
          </div>
        );
      }}
    </Query>
  );
}

storiesOf("Apollo Client", module).add("Current User", () => {
  return <CurrentUser />;
});

import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import { storiesOf } from "@storybook/react";
import apolloStorybookDecorator from "apollo-storybook-react";

const typeDefs = `
  type Query {
    helloWorld: String
  }

  schema {
    query: Query
  }
`;

const mocks = {
  Query: () => {
    return {
      helloWorld: () => {
        return "Hello from Apollo!!";
      }
    };
  }
};

function HelloWorld() {
  return (
    <Query
      query={gql`
        query hello {
          helloWorld
        }
      `}
    >
      {({ loading, data }) => {
        const hello = data && data.helloWorld;

        if (loading) {
          return <h1>Loading one second please!</h1>;
        }

        return <h1>{hello}</h1>;
      }}
    </Query>
  );
}

storiesOf("Apollo Storybook Decorator", module)
  .addDecorator(
    apolloStorybookDecorator({
      typeDefs,
      mocks
    })
  )
  .add("Hello World Test", () => {
    return <HelloWorld />;
  });

storiesOf("Apollo Client", module).addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks
  })
);

import { configure, addDecorator } from "@storybook/react";
import apolloStorybookDecorator from "apollo-storybook-react";
import typeDefs from "../wherever/your/typeDefs/live";
import mocks from "../wherever/your/mocks/live";

addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks
  })
);

function loadStories() {
  // stories...
}

configure(loadStories, module);

type DecoratorType = {
  //string representing your graphql schema, if you use tools like `babel-plugin-inline-import` you can import this from a  .graphql file
  typeDefs: string | Array<string>,
  // object that resolves the keys of your graphql schema
  mocks: Object,
  apolloClientOptions?: Object,
  apolloLinkOptions?: Object,
  // optional typeResolvers for complex mocking
  typeResolvers?: Object,
  // optional context
  context?: Object,
  // optional root value
  rootValue?: Object,
  // optional resolver validation options, see: https://git.io/fALf4
  resolverValidationOptions?: Object
};

storiesOf("Apollo Client", module).addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks,
    resolverValidationOptions: {
      requireResolversForResolveType: false
    }
  })
);