GraphQl useQuery loading state always returns false

I'm trying to use useQuery to fetch posts data from my graphQL server and it works fine after it's first compiled but then when I refresh it fails to get the data and erros out from useQuery because the loading state always returns false.

TypeError: Cannot read property 'getPosts' of undefined
Home
src/pages/Home.jsx:10
7 | function Home() {
8 |   const {
9 |     loading,
> 10 |     data: { getPosts: posts }
11 |   } = useQuery(FETCH_POSTS_QUERY);
12 |   console.log(loading)
13 | 

``

function Home() {
 const {
 loading,
 data: { getPosts: posts }
 } = useQuery(FETCH_POSTS_QUERY);
  console.log(loading)

``

{loading ? (
      <h1>Loading posts..</h1>
    ) : (
      <Transition.Group>
        {posts &&
          posts.map((post) => (
            <Grid.Column key={post.id} style={{ marginBottom: 20 }}>
              <PostCard post={post} />
            </Grid.Column>
          ))}
      </Transition.Group>
    )}