How to prevent "forever fetching" due the Client executing a query on "non-rendered pages" when doing page reload? #3461
-
Hello all, I am working on a project in I encounter a forever fetching state when doing a page reload or when manually entering the URL in the browser (probably the same effect as a page reload). The Urql client seems to try to execute the queries of other "non-rendered pages", which never resolve and remain in a fetching state. For example, a I figure that it probably has something to do with the initialization (and sharing) of the Client. This is down as follows: function AppHead() {
const { title, description } = useAppHead();
return (
<Head>
<title>{title}</title>
<meta content={description} name="description" />
<link href="/favicon.ico" rel="icon" />
</Head>
);
}
export interface UrqlProviderProps {
children: ReactNode;
}
function UrqlProvider({ children }: UrqlProviderProps) {
const isLoggedIn = useIsLoggedIn();
const client = useMemo(() => {
if (isLoggedIn === null) {
return null;
}
return createClient({
url: 'http://localhost:3000',
suspense: true,
exchanges: [
devtoolsExchange,
cacheExchange({}), // graphcache
firebaseTokenExchange,
fetchExchange,
]
});
}, [isLoggedIn]);
if (client === null) {
return null;
}
return (
<Provider value={client}>
<HydrateClientAtom urqlClient={client}>{children}</HydrateClientAtom>
</Provider>
);
}
function AppContent({ Component, pageProps }: AppProps) {
const [theme, setTheme] = useRootTheme();
const contents = useMemo(() => {
const getLayout = Component.getLayout ?? ((page) => page);
return getLayout(<Component {...pageProps} />) ?? null;
}, [Component, pageProps]);
return (
<StrictMode>
<NextThemeProvider
onChangeTheme={(next) => {
setTheme(next as unknown as ColorScheme);
}}
>
<JotaiProvider>
<UrqlProvider>
<ErrorBoundary>
<Suspense fallback={<Loader />}>{contents}</Suspense>
</ErrorBoundary>
</UrqlProvider>
</JotaiProvider>
</NextThemeProvider>
</StrictMode>
);
}
function App(props: AppProps) {
return (
<>
<AppHead />
<AppContent {...props} />
</>
);
}
export default App; The screen (home and settings) are just skeleton screens containing a message. In case of the home sceen we also perform a query with the Can someone maybe help me with this? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
This was solved on Discord and was due to a miss behaving |
Beta Was this translation helpful? Give feedback.
This was solved on Discord and was due to a miss behaving
firesbaseExchange
https://discord.com/channels/1082378892523864074/1184113598667165706/1184113598667165706