Abhi Aiyer @abhiaiyer Senior Software Engineer @ Workpop

Abhi is a life architect, but has mainly used his talents for technology. He used to love Object Oriented Problem Solving, but now finds himself in the functional world…"Schemin". Technology is not only a passion but an outlet for creative lateral thinking. Abhi is JavaScript developer with growing experience in Node.js, React, and GraphQL. He currently hosts of GraphQL Radio and contributes tutorial content for How To GraphQL.

Stages of Schema First DevelopmentLast year Daniel talks about these 3 things that looks like thisBut it really looks like this.
Types & Codegen & Review
You should organize your types into its own code structure and take time to review the structure.
MockingYou should be able to provide fake data wit Mock. A Mock is something that intercepts the network interface.
Better mocking on the web with these tools**Build User interfaces in isolation Apollo storybook decorator to mock build, and integrate into your project.

Define your schema

import faker from 'faker';

export const typeDefs = `
  type Query {
    name: String
  }
  schema {
    query: Query
  }
`;

export const mockResolvers = {
  Query: () => {
    return {
      name: () => {
        return faker.name.findName();
      }
    };
  }
}

• decorator

  import { configure, addDecorator } from '@storybook/react'; import apolloStorybookDecorator from 'apollo-storybook-decorator';

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

  function loadStories() { require('../stories/index.js'); }

  configure(loadStories, module);

• write a storybook story.

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

  let HelloWorld = function HelloWorld({ data }) { const name = data && data.name; if (data && data.loading) { return

  Loading one second please!

  ; } return (

  Hello {name}, welcome from GraphQL Summit!

  ); };

  const query = gqlquery hello { name };

  HelloWorld = graphql(query)(HelloWorld);

  storiesOf('Apollo Storybook Example', module) .add('A simple component for GraphQL Summit', () => { return ; });