text: import { ApolloConsumer } from 'react-apollo'
  import gql from 'graphql-tag'
  import { allPostsQuery, allPostsQueryVars } from './PostList'
  
  export default function Submit () {
    return (
      <ApolloConsumer>
        {client => (
          <form onSubmit={event => handleSubmit(event, client)}>
            <h1>Submit</h1>
            <input placeholder='title' name='title' type='text' required />
            <input placeholder='url' name='url' type='url' required />
            <button type='submit'>Submit</button>
            <style jsx>{`
              form {
                border-bottom: 1px solid #ececec;
                padding-bottom: 20px;
                margin-bottom: 20px;
              }
              h1 {
                font-size: 20px;
              }
              input {
                display: block;
                margin-bottom: 10px;
              }
            `}</style>
          </form>
        )}
      </ApolloConsumer>
    )
  }
  
  function handleSubmit (event, client) {
    event.preventDefault()
    const form = event.target
    const formData = new window.FormData(form)
    const title = formData.get('title')
    const url = formData.get('url')
    form.reset()
  
    client.mutate({
      mutation: gql`
        mutation createPost($title: String!, $url: String!) {
          createPost(title: $title, url: $url) {
            id
            title
            votes
            url
            createdAt
          }
        }
      `,
      variables: { title, url },
      update: (proxy, { data: { createPost } }) => {
        const data = proxy.readQuery({
          query: allPostsQuery,
          variables: allPostsQueryVars
        })
        proxy.writeQuery({
          query: allPostsQuery,
          data: {
            ...data,
            allPosts: [createPost, ...data.allPosts]
          },
          variables: allPostsQueryVars
        })
      }
    })
  }