Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Purging InMemoryCache when switching stories #90

Open
toyflish opened this issue Feb 27, 2023 · 2 comments
Open

Purging InMemoryCache when switching stories #90

toyflish opened this issue Feb 27, 2023 · 2 comments
Labels
needs more info Not enough info to move forward with yet

Comments

@toyflish
Copy link

I have apolloclient for storybook configured with InMemoryCache to have the same behavior in storybook as in my app.
Switching component stories keeps the old state of the cache alive, so I have to refresh the browser to purge it.
If I call client.clearStore() inside my stories, I can purge the cache.
I tried to create a decorator that does a client.clearStore() on ApolloClient. But I can not get it chained to be inside the ApolloProvider. Seems like the Apollo context gets added inside the decorators. So I ended up adding the decorator as a wrapper inside every ComponentStory.

How could I achieve some global way to purge the cache when switching to another story?

my cache purging component:

export default function ApolloCacheClearDecorator({children}: {children: JSX.Element}) {
  const [cleared, setCleared] = useState(false);

  const client = useApolloClient();

  useEffect(() => {
    if (cleared) return;
    client.clearStore();
    setCleared(true);
  }, [cleared, client]);

  if (!cleared) return <div>Clearing Apollo cache...</div>;

  return children;
}

my apollo config in .storybook/preview.js

import {MockedProvider} from '@apollo/client/testing';
import {PageDecorator} from '../src/storybook/PageDecorator';
import {withRouter} from 'storybook-addon-react-router-v6';

export const apolloCacheConfig = new InMemoryCache({
  typePolicies: {
    Google: {
      merge: true,
    },
  },
});


export const parameters = {
  apolloClient: {
    MockedProvider,
    cache: apolloCacheConfig,
  },
};
export const decorators = [PageDecorator, withRouter];

@lifeiscontent
Copy link
Owner

@toyflish great question, it's still an unknown, but I've asked in the discord here: https://discord.com/channels/486522875931656193/1089766870036525116/1089766870036525116 once I get a response, I'll see if I can put together a solution for you.

@lifeiscontent lifeiscontent added the needs more info Not enough info to move forward with yet label Mar 27, 2023
@lifeiscontent
Copy link
Owner

@toyflish is this still an issue for you? If so can you outline some expectations you'd have for the addon to do that it currently doesn't?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs more info Not enough info to move forward with yet
Projects
None yet
Development

No branches or pull requests

2 participants