Empty apollo cache?

Hi - new redwoodjs user here. Very happy so far, despite some rough edges :slight_smile:

One thing I’m trying to figure out: it seems like (from the docs & discussions here) apollo’s cache should be working out of the box, but when I check in the console (& dev tools) it appears to be blank. Is there a setting I need to enable first?

(you’ll have to trust me that my page
image

Thanks!

1 Like

Hey @wminshew :wave:

Apollo should indeed be working out of the box. If I could get a little more info, is the context here that you’ve navigated to a Page with a Cell, you see the data on the Page, but there’s still no data in the cache?

This is what I see after I’ve navigated to a Page with a Cell:

Yes indeed. Below is a more zoomed out view where you can see data loaded on the page from multiple cells. I was hoping there might be an easy “yeah we turned it off but set this one thing and it’ll work again” answer :slight_smile: I will do some more digging on my end now that I know this is abnormal behavior…

(perhaps I should’ve also added this is on localhost & using redwood 0.23, if that changes anything)

Yeah this is definitely abnormal :thinking: the screenshot I posted above was from an app on localhost & v0.23 as well. I’d be happy to look at the repo and try to reproduce it locally if it’s not sensitive!

As a “last resort” (really just personal preference) you could try swapping the query client to something like react-query. The query client’s much more swappable now, and will only become even more so in v0.24:

But I’d definitely like to figure this bug out! You haven’t changed anything about the beforeQuery in the Cell or the InMemoryCache in the index.js right? Just all the default settings here?

nothing sensitive right now – just added you to the repo if you want to spin it up locally. To the best of my knowledge, we haven’t touched any settings related to the client (beforeQuery, InMemoryCache, etc)

will think about react-query & graphql-request, thank you

1 Like

Hey :wave: @wminshew, perhaps it’s just that the cache is in memory and not going to be visible in the variable you are checking?

It may be worth checking if the cache is being used using these methods: https://www.apollographql.com/docs/react/caching/cache-interaction/#readquery

(On my phone, sorry if this seems brief!)

thank you for the idea! in the apollo dev tool, there is an option to run the query “against your cache”. Can confirm that this returns nothing, despite being on a page with the AsksCell successfully loaded

I got the same error locally. And I seemed to have fixed it!

The only thing I did was deliberately pass InMemoryCache to the RedwoodProvider (see the code block below). This is definitely a weird one because it looks like we already do that by default in the RedwoodApolloProvider^1. So I’ll look into why that’s not working as expected, but as a fix for now you can do this:

import { InMemoryCache } from '@apollo/client'
const cache = new InMemoryCache()

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider client={netlifyIdentity} type="netlify">
      <RedwoodProvider graphQLClientConfig={{ cache }}>
        <Routes />
      </RedwoodProvider>
    </AuthProvider>
  </FatalErrorBoundary>,
  document.getElementById('redwood-app')
)

You’ll also have to end up doing this anyway if you want to configure the typePolicies.

1 Like

thank you!

I have a weird issue where the Apollo Client tools were not loading even though I am passing the client config into RedwoodProvider <RedwoodProvider graphQLClientConfig={{ connectToDevTools: true }}> If I went into RedwoodApolloProvider.js and console logged the graphQLClientConfig inside of RedwoodApolloProvider or console logged config inside of ApolloProviderWithFetchConfig then the Apollo Client Dev Tools would load as expected, using the Chrome Extension inside Dev Tools. WHile investigating this issue and the strange behavior what I discovered is the extension works as expected when adding or removing a console log is because of hot-reloading. No matter what change I make so long as the site rebuilds I get the Dev Tools like this:

but if I refresh the page then I get this respones, the extension says no client found but the __APOLLO_CLIENT__ on the console works as expected.

Am I doing something wrong, is this the expected behavior or is this an issue as well?

@mbush92 you’re definitely not doing anything wrong–if anything that’s some nice debugging on your end!.

I’ve had similar trouble with the Apollo Client dev tools. Judging by the activity on the repo, it looks like things have picked up, so I should give it another look. The __APOLLO_CLIENT__ global’s been good enough for me since most of the time I’m just using the dev tools to see what’s in the cache, and with the global I can just log it out.

I’ll make an issue on the repo out of this and see what we can do!

huh… that’s weird. I know these aren’t super helpful suggestions, but have you
1/ seen if the issue replicates with a “new” rw repo / from scratch?
2/ tried uninstalling & reinstalling apollo dev tools? judging by the reviews it’s pretty buggy (sorry to be that "have you tried turning it off and back on again? guy here :slight_smile: )

I had some weird intermittent dev tools errors when trying to figure out the cache issue. Hadn’t noticed a pattern to them, but will watch more closely in the future

@wminshew I haven’t tried either of those, this repo is not that old, maybe 6 weeks or so. I could definitely try when I get some more time to see if its reproducible.

@dom one question I have since it was not clear when I saw the __APPOLLO_CLIENT__ global writeup in one of the posts is unless I specify in RedwoodProvider to use this it just returns an empty cache, as soon as I specify to use it the cache is returned as expected (even when the extension doesn’t want to work). Is there something in my setup that may not be correct? I am running on local-host so definitely a dev environment. I actually created an environment variable for this so that in production its not active.

With the connectToDevTools set to true in the RedwoodProvider as

<RedwoodProvider
        graphQLClientConfig={{
          connectToDevTools: process.env.USE_APOLLO_CLIENT_DEV_TOOLS == 'true',
        }}
      >
...

yields

Deleting the prop from RedwoodProvider yields

this makes me wonder if its related to the issue that I was having. Have you tried this solution yet?

Yes, if I put the cache into the graphQLClientConfig then I see it on the console but the extension does not work, if I put the connectToDevTools in then it works for both, at least on hot reload. And it’s pretty neat how you can run queries and such against the cache.

1 Like