mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
4b257483e2
* Add minimal apollo example * Update apollo example README * Update apollo example demo link in README * Fix button styles * Fix show more button * Alias demo url * Include the data field on the Apollo store when hydrating * Revert * Include the data field on the Apollo store when hydrating per tpreusse's suggestion. * Add example to faq section in README * Sort by newest; Add active state to buttons * Make optimization suggestions * Use process.browser; inline props
80 lines
1.8 KiB
JavaScript
80 lines
1.8 KiB
JavaScript
import gql from 'graphql-tag'
|
|
import { graphql } from 'react-apollo'
|
|
|
|
function Submit ({ createPost }) {
|
|
function handleSubmit (e) {
|
|
e.preventDefault()
|
|
|
|
let title = e.target.elements.title.value
|
|
let url = e.target.elements.url.value
|
|
|
|
if (title === '' || url === '') {
|
|
window.alert('Both fields are required.')
|
|
return false
|
|
}
|
|
|
|
// prepend http if missing from url
|
|
if (!url.match(/^[a-zA-Z]+:\/\//)) {
|
|
url = `http://${url}`
|
|
}
|
|
|
|
createPost(title, url)
|
|
|
|
// reset form
|
|
e.target.elements.title.value = ''
|
|
e.target.elements.url.value = ''
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<h1>Submit</h1>
|
|
<input placeholder='title' name='title' />
|
|
<input placeholder='url' name='url' />
|
|
<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>
|
|
)
|
|
}
|
|
|
|
const createPost = gql`
|
|
mutation createPost($title: String!, $url: String!) {
|
|
createPost(title: $title, url: $url) {
|
|
id
|
|
title
|
|
votes
|
|
url
|
|
createdAt
|
|
}
|
|
}
|
|
`
|
|
|
|
export default graphql(createPost, {
|
|
props: ({ mutate }) => ({
|
|
createPost: (title, url) => mutate({
|
|
variables: { title, url },
|
|
updateQueries: {
|
|
allPosts: (previousResult, { mutationResult }) => {
|
|
const newPost = mutationResult.data.createPost
|
|
return Object.assign({}, previousResult, {
|
|
// Append the new post
|
|
allPosts: [...previousResult.allPosts, newPost]
|
|
})
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})(Submit)
|