apollographql / apollographql/apollo-client-integrations
Handling errors with useSuspenseQuery
- 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