Post.js

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);