Git Product home page Git Product logo

Comments (8)

MilanKovacic avatar MilanKovacic commented on May 24, 2024

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.

morijenab avatar morijenab commented on May 24, 2024

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.

MilanKovacic avatar MilanKovacic commented on May 24, 2024

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.

morijenab avatar morijenab commented on May 24, 2024

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.

MilanKovacic avatar MilanKovacic commented on May 24, 2024

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.

morijenab avatar morijenab commented on May 24, 2024

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.

MilanKovacic avatar MilanKovacic commented on May 24, 2024

That s most likely the problem, since they are sharing the instance. Could you try without sharing the react-query?

from single-spa.

MilanKovacic avatar MilanKovacic commented on May 24, 2024

Closing issue due to inactivity. Feel free to reopen if issue still persists.

from single-spa.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.