apollographql / apollographql/apollo-client-integrations

Handling errors with useSuspenseQuery

Open
#477 12 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

Hi,

I'm trying to migrate an existing Next project from pages to app router and am getting stuck with some error handling issues. Is there a way to catch errors throw when using `useSuspenseQuery` from the server component? Using an error boundary works to show a fallback UI, but ideally I'd like to handle it myself, e.g. throw `notFound()` from the page.

Here's a simple example:
```ts
// Server (page) component
export default async function Page(props) {
const { id } = await props.params;

// I'd like to handle any error here, but don't really want to call the query manually...
return (



);
}

// Client component
export function ClientComponent({ id }) {
const data = useSuspenseQuery(etc.)
}
```

The second part of the issue is the page metadata. It feels like the only way to do this is manually query to get the data I need. Using the same example from above, the page metadata function would look like this,

```ts
export async function generateMetadata(props: EditCardPageProps) {
const { id } = await props.params;
// This comes from registerApolloClient
const client = await getClient();

try {
// Will this query be de-duped if it's the same as the one used in ?
const response = await client.query({ query: theQuery, variables: { id } });
return { etc, }
} catch (err) {}

return {}
}
```

My goal is to keep all data "client data" as the application relies heavily on reactive data and cache mutations, so revalidating whole pages is not suitable. I loved working with the Apollo Client in the pages router, but I feel like I'm constantly fighting to make it work now, `useSuspenseQuery` is not necessarily the drop-in replacement for `useQuery` I was hoping for.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the reported server page, ClientComponent, and generateMetadata examples using useSuspenseQuery. Investigate whether server-component error handling and metadata query de-duplication are supported by the Next.js App Router integration. Done would require a decided, reproducible scope for the requested behavior; no repository files or tests are named.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, next.js, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.