# useReadQuery but for fragment/partial data?

**URL:** <https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [July 11, 2024, 9:26am UTC](https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703 "2024-07-11T09:26:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![misha-erm](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/misha-erm/32/5056_2.png) [@misha-erm](https://community.apollographql.com/u/misha-erm)\
**Post date:** [July 11, 2024, 9:26am UTC](https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703/1 "2024-07-11T09:26:39Z")

</div>

Hello,  
let’s say I have two routes: /items and /items/:id and a component `<ItemCard/>` with defined `ItemCardFragment`

My queries look like:

```gql
items() {
  ...ItemCardFragment  
}

```

and

```gql
item(id: $id) {
   ...ItemCardFragment

  someOtherProp1
  someOtherProp2
  someOtherProp3
  someOtherProp4
}

```

I use react-router and both pages preload those queries. Both pages also render , the difference is that details page also renders some additional component on the page

## Question:

When I go to the details page I want to be immediately displayed since all the data is already in the cache and suspend rendering only for components that require `someOtherPropN`. How am I supposed to achieve this? Since queries requires different set of fields `useReadQuery` will suspend until all the data is fetched.  
I think what I’m wishing for is something like `useReadQuery(queryRef, {fragment: ItemCardFragment})`

### Workarounds:

I can think of a couple of workarounds:

1. Split the query for the details page, e.g. `itemCardProps: item() {...ItemCardFragment}` and `item() {someOtherPropN}`. Then I can use `useReadQuery` for specific `queryRef`. The downside is that Apollo will make two network request when I go to that page by url. (maybe can be worked around with some batching technique?)
2. Use `useFragment` for the part that uses ItemCard. Move `useReadQuery` under suspense somewhere along the tree. I’m currently using this approach

Thanks in advance for any tips 🙏

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [July 11, 2024, 9:49am UTC](https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703/2 "2024-07-11T09:49:36Z")

</div>

Hi @misha-erm!

That is currently still on our [Roadmap](https://github.com/apollographql/apollo-client/blob/main/ROADMAP.md#upcoming-features). We are currently working on Data Masking, and as soon as that’s done we’ll get to the suspenseful `useFragment` story.

Both of your workarounds seem currently viable - you’ll have to decide for yourself, which tradeoffs work better for you.

---

<div class="post-metadata">

**Author:** ![misha-erm](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/misha-erm/32/5056_2.png) [@misha-erm](https://community.apollographql.com/u/misha-erm)\
**Post date:** [July 11, 2024, 11:54am UTC](https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703/3 "2024-07-11T11:54:11Z")

</div>

Nice to know that’s on the roadmap, thank you

After some tries what worked best for me was combination of `returnPartialData: true` in `preloadQuery` together with

```auto
const {data: {item}} = useReadQuery(queryRef)

const {data: dataFromFragment, complete} = useFragment(); 

if (!item) return <NotFound />

if(!complete) return null;

return <ItemCard item={dataFromFragment} />
...

```

---

<div class="post-metadata">

**Author:** ![misha-erm](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/misha-erm/32/5056_2.png) [@misha-erm](https://community.apollographql.com/u/misha-erm)\
**Post date:** [July 11, 2024, 6:45pm UTC](https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703/4 "2024-07-11T18:45:42Z")

</div>

@lenz one more question though

Is it known that `preloadQuery` with `returnPartialData: true` doesn’t throw error? Failed to find any info about that in the docs

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [July 12, 2024, 9:03am UTC](https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703/5 "2024-07-12T09:03:42Z")

</div>

I believe any error handling should happen in the component where you call `readQuery` - are you also not seeing that?

---

<div class="post-metadata">

**Author:** ![misha-erm](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/misha-erm/32/5056_2.png) [@misha-erm](https://community.apollographql.com/u/misha-erm)\
**Post date:** [July 12, 2024, 10:58am UTC](https://community.apollographql.com/t/usereadquery-but-for-fragment-partial-data/7703/6 "2024-07-12T10:58:52Z")

</div>

Don’t see that. I blocked the query in my devtools but `useReadQuery` never throws and just returns empty object

 ![image](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/2X/c/cc2e30a1c0b167b1ebd34351d80ee7e4e909c4a6.jpeg)

The preloader looks like this:

```auto
const TournamentQuery = gql(`
query TournamentQuery($id: ID!) {
  tournament(id: $id) {
    ...TournamentBannerFragment
    ...TournamentMySubmissionsFragment
    ...TournamentOverviewFragment
    ...TournamentAwardsFragment
  }
}
`);

export const tournamentLoader = protectedLoader(({ params }) => {
  const id = params.id as string;

  return {
    queryRef: preloadQuery(TournamentQuery, {
      variables: {
        id,
      },
      fetchPolicy: 'cache-and-network',
      returnPartialData: true,
    }),
  };
});

```

as soon as I remove `returnPartialData` the error throws and my error boundary is rendered