Set up dynamic routes in Astro with GraphQL fragments query doesn’t work

I am trying to setup dynamic routes in Astro SSR mode.

From the api I can use the following query (it contains fragments):

I am using Apollo Client.

const GET_PAGE = gql`
  query Page($target: String!) {
    page(target: $target) {
      type
      content {
        ... on PageOne {
          url: anotherKey
          title: anotherTitleField
          id
        }
        ... on PageTwo {
          url
          title
          id
        }
      }
    }
  }
`;

//[...uri].astro

---
const uri = `/${Astro.params.uri}/`;


const { data, loading } = await client.query<Data>({
  query: GET_PAGE,
  variables: {
    target: uri,
  },
});
---

<Layout title="Test">
  {loading && <p>Loading...</p>}
  {
    !loading && (
      <>
        {console.log('data', data)}
        <h1>{data.page.type}</h1>
        <p>{data.page.content.title}</p>
        <p>{uri}</p>
      </>
    )
  }
</Layout>

The wird thing is. When I remove one of the fragments and try to reach that particular page it’s working fine. However with both fragments in the query it isn’t working.

Why is that and how to solve this?