apollographql / apollographql/apollo-client-integrations
Application error: a client-side exception has occurred
- Dominant language
- TypeScript
- Stars
- 556
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
Hello i have issue. When apollo cannot connect to backend server it shows this error exception on page. I want to show client onlz error section, but the whole page should works normally, only failed section should be rendered as some error div etc. How to avoid client shutdown the page like this. The page should be prerendered but onlz section with properties needs to be fetched with server data on income to page.
For context backend now is shutted down.
Even if i use `useQuery` instead of `useSuspendQuery` same problem happens.
Can you please help me to solve this issue ?
Thank you so much for help 👍
Page code:
```
export default function AboutProperties() {
const { data } = useSuspenseQuery(
GET_ALL_PROPERTIES_QUERY,
{
variables: {
paginationInput: {
pageSize: 6,
page: 1,
},
filter: {},
sort: 'DESC',
},
errorPolicy: 'all',
}
);
```
Apollo config:
```'use client';
// ^ this file needs the "use client" pragma
import process from 'process';
import { useCallback } from 'react';
import { HttpLink } from '@apollo/client';
import {
NextSSRApolloClient,
NextSSRInMemoryCache,
ApolloNextAppProvider,
} from '@apollo/experimental-nextjs-app-support/ssr';
import { useLocalStorage } from '../../hooks/use-local-storage';
// have a function to create a client for you
function makeClient(token: string) {
const httpLink = new HttpLink({
// this needs to be an absolute url, as relative urls cannot be used in SSR
uri:
typeof window === 'undefined'
? process.env.SERVER_GRAPHQL_URL
: process.env.NEXT_PUBLIC_GRAPHQL_URL,
headers: {
'Access-Token': token || '',
},
// you can disable result caching here if you want to
// (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
// you can override the default `fetchOptions` on a per query basis
// via the `context` property on the options passed as a second argument
// to an Apollo Client data fetching hook, e.g.:
// const { data } = useSuspenseQuery(MY_QUERY, { context: { fetchOptions: { cache: "force-cache" }}});
});
return new NextSSRApolloClient({
// use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
cache: new NextSSRInMemoryCache(),
link: httpLink,
});
}
interface Props extends React.PropsWithChildren {}
// you need to create a component to wrap your app in
// @ts-ignore
export function ApolloNextAppProviderWrapper({ children }: Readonly) {
const token = useLocalStorage('token', {
token: '',
});
const createClient = useCallback(() => makeClient(token.state.token), [token.state.token]);
return {children};
}```
Contributor guide
No contributing guide indexed for this repository
Research direction
Review the AboutProperties component and the Apollo configuration using ApolloNextAppProvider, NextSSRApolloClient, and useSuspenseQuery; first reproduce the failure with the backend unavailable. Determine how the page's rendering and error handling are expected to behave, then verify that only the failed data section shows an error while the rest of the prerendered page remains usable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, next.js, react, typescript
- Domain
- backend-api-design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100