Skip to content

Instantly share code, notes, and snippets.

@luandevpro luandevpro/Post.js
Created Jun 22, 2019

Embed
What would you like to do?
import React from 'react';
import gql from 'graphql-tag';
import { useQuery } from 'react-apollo-hooks';
import withAuth from '../lib/withAuth';
const getPosts = gql`
query getPosts($user_id: String!, $offset: Int) {
post(
offset: $offset
limit: 2
order_by: { created_at: desc }
where: { user_id: { _eq: $user_id } }
) {
id
title
description
created_at
user {
id
displayName
email
}
}
}
`;
function Post({ token }) {
const data = useQuery(getPosts, {
variables: {
user_id: token && token['https://hasura.io/jwt/claims']['x-hasura-user-id'],
},
});
if (!token) return <div>Loading ...</div>;
if (data.loading || data.error) {
return <div>Loading...</div>;
}
console.log(data);
return (
<ul>
{data.data.post.map(post => (
<div key={post.created_at}>
<h1>{post.title}</h1>
<p>{post.description}</p>
</div>
))}
<button
onClick={() =>
data.fetchMore({
variables: {
offset: data.data.post.length,
},
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
return Object.assign({}, prev, {
post: [...prev.post, ...fetchMoreResult.post],
});
},
})
}
>
refetch
</button>
</ul>
);
}
export default withAuth(Post);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.