Should a fragment container receive initial data from local cache, or will it always start in a "loading" state?

[ryancole]

Hi folks,

I've got a nav bar fragment container component. The nav bar shows the current active user's name. This is fetched using a static GraphQL query like follows ...

{
  me {
    username
  }
}

Once this is fetched, it doesn't need to be re-fetched and can come from local cache. So, I was expecting the fragment container to immedietly provide this data to the underlying component. It looks like the underlying component is not being provided the data on first render, though.

I don't know that Relay is actually requesting the data again, but I am seeing the component render its "loading" state first. Basically, the fragment container is not fetching from cache and providing data on first render.

Is this how it should work or is there some requirement for local caching to work this way?

Thanks!

[adjourn]

QueryRenderer doesn't check if already has the data & disposes all the data it has fetched if unmounts.

I don't know that Relay is actually requesting the data again

Could you verify this? It most likely fetches data again assuming QueryRenderer render is similar to this:

if (props) return <DataComponent/>;
if (error) return <ErrorComponent/>;
return <LoadingComponent/>;

---

If you want it to look for data in cache first, use this package.

If you want to "disable" garbage collection (aka QueryRenderer to not throw away already fetched data if it unmounts), you could try something like this. PS! Use at your own risk, I tried it & everything seems to work but I haven't delved into this yet - I don't know 100% if it has any undesirable side-effects.

[graingert]

@adjourn is it possible to do something like this with relay-query-lookup-renderer ?

[robrichard]

@graingert relay-query-lookup-renderer will only render with data from the store if the entire query can be resolved from the store by using the check function in the relay store api: https://github.com/facebook/relay/blob/master/packages/relay-runtime/store/RelayModernEnvironment.js#L136-L138

[jstejada]

I replied in #2296. What @robrichard explained here is accurate, so I'll go ahead and close this for now. Feel free to re-open if you have other questions! Thanks!

[graingert]

@robrichard Any way to get it to avoid this check and just render whatever data is
available? Eg #2296