Comments (8)
Can you post an example of how you initialize/use React Query?
Is it possible that you are using a persistant cache mechanism?
from single-spa.
Hey @MilanKovacic thanks for response
here is the exact way the query is initialised/used
100% sure there is no persistence mechanism.
PS:
"single-spa": "^6.0.0",
"single-spa-layout": "^2.2.0"
top level component :
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import { Index } from './Index';
const lifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: Index,
renderType: 'createRoot',
domElementGetter: () => document.querySelector<HTMLElement>('.mfe-root-config_shelf-body > section')!,
errorBoundary(err) {
return <div />;
},
});
export const { bootstrap, mount, unmount } = lifecycles;
and index component
import { ReactQueryClient } from './lib';
export const Index = () => {
return (
<ThemeProvider theme={defaultTheme}>
<QueryClientProvider client={ReactQueryClient}>
<I18nextProvider i18n={i18n}>
<App />
</I18nextProvider>
</QueryClientProvider>
</ThemeProvider>
);
};
import { QueryClient } from 'react-query';
export const ReactQueryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
});
and the way mfe-root-config is confined :
const context = {
props: { },
loaders: {
genericLoader: skeleton,
},
};
const routes = constructRoutes(document.querySelector('#single-spa-layout') as HTMLTemplateElement, context);
const applications = constructApplications({
routes,
loadApp({ name }) {
return System.import(name);
},
});
const layoutEngine = constructLayoutEngine({ routes, applications });
applications.forEach(registerApplication);
layoutEngine.activate();
from single-spa.
It would be helpful if you could create a small repository to showcase the behavior.
You can try explicitly controlling the caching behavior, for example:
import { ReactQueryClient } from './lib';
// Rest of your single-spa lifecycles
// Extend the unmount function to include cache clearing
export function unmount(props) {
// Clear the React Query cache
ReactQueryClient.clear();
// Proceed with the original single-spa-react unmount logic
return reactLifecycles.unmount(props);
}
from single-spa.
Thanks, yes, of course, clean up the query inside the unmount in an option, but the question is why if the unmount is being called the memory is not being cleaned? is it by design or purposely?
PS:I will try to make a repository to make it easier to check.
from single-spa.
It is hard to say what is happening without a small example. Are you possibly sharing react-query through the import maps?
from single-spa.
yes indeed
<script type="systemjs-importmap" nonce="*CSP_NONCE*">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/es2015/system/single-spa.min.js",
"react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js",
"react-query": "https://cdn.jsdelivr.net/npm/[email protected]/dist/react-query.production.min.js"
}
}
</script>
and I found not only react query but also the context and saga have the same behaviour.
from single-spa.
That s most likely the problem, since they are sharing the instance. Could you try without sharing the react-query?
from single-spa.
Closing issue due to inactivity. Feel free to reopen if issue still persists.
from single-spa.
Related Issues (20)
- The call to the assets of microfrontend fails because its a different port HOT 2
- If an action tries to unmount a parcel while its already unmounting, the parent application gets set to SKIP_BECAUSE_BROKEN HOT 3
- Drop IE11 support
- Question: Is it possible to consume via single-spa webpack5 based federated micro frontends and vice versa?
- TypeError in Safari: createElementVNode is not a function HOT 5
- Questions about routing HOT 4
- Is this a solution for Vite ESM? HOT 4
- Rework navigation cancelation
- How to merge large application with single spa HOT 1
- Single-spa is always appending index.html to the URL HOT 4
- PROPOSAL: single-spa CLI HOT 5
- Adding styleguide to Nuxt app with single-spa
- PROPOSAL: Add the posibility of recycle micro-apps styles, after those are unmounted HOT 1
- Fixed component flickers during trasition between MFEs HOT 1
- Catching Runtime Error so user isn't bothered HOT 3
- Cannot use dts-bundle-generator with single-spa HOT 1
- Parcel use in a migrated react project to single-spa HOT 2
- Issue with updating divs containing single-spa apps via AJAX HOT 3
- Logging SystemJS Error#3 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from single-spa.