f9cb5ac6b0
## Motivation As Graphcool is being shutdown, we replaced all the graphcool api endpoints with some handcrafted APIs using Prisma & Nexus, that can be found here https://github.com/prisma-labs/nextjs-graphql-api-examples. These GraphQL endpoints are now deployed to Vercel. ## Notes - I couldn't get the reason-relay example to run. Given that the relay endpoint works on the other relay example, I don't see any reason why it wouldn't work on that one - The `with-apollo` example is buggy when creating some posts, but nothing related to the switch of the api endpoint as it was already buggy before. I suspect the `concatPagination` strategy to be the cause of that bug, but I couldn't figure it out. Fixes #14780
57 lines
1.2 KiB
JavaScript
57 lines
1.2 KiB
JavaScript
import { gql, useMutation } from '@apollo/client'
|
|
|
|
const UPDATE_POST_MUTATION = gql`
|
|
mutation votePost($id: String!) {
|
|
votePost(id: $id) {
|
|
id
|
|
votes
|
|
__typename
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function PostUpvoter({ votes, id }) {
|
|
const [updatePost] = useMutation(UPDATE_POST_MUTATION)
|
|
|
|
const upvotePost = () => {
|
|
updatePost({
|
|
variables: {
|
|
id,
|
|
},
|
|
optimisticResponse: {
|
|
__typename: 'Mutation',
|
|
votePost: {
|
|
__typename: 'Post',
|
|
id,
|
|
votes: votes + 1,
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<button onClick={() => upvotePost()}>
|
|
{votes}
|
|
<style jsx>{`
|
|
button {
|
|
background-color: transparent;
|
|
border: 1px solid #e4e4e4;
|
|
color: #000;
|
|
}
|
|
button:active {
|
|
background-color: transparent;
|
|
}
|
|
button:before {
|
|
align-self: center;
|
|
border-color: transparent transparent #000000 transparent;
|
|
border-style: solid;
|
|
border-width: 0 4px 6px 4px;
|
|
content: '';
|
|
height: 0;
|
|
margin-right: 5px;
|
|
width: 0;
|
|
}
|
|
`}</style>
|
|
</button>
|
|
)
|
|
}
|