When query is served from cache, app state won't be updated

[adriansoovarymms]

I have the following React component that is running a query. In a useEffect hook i'm waiting for the result data, to map it to a new object and feed it into a presentational child component.

import Content from './Content'

export const Component: FC<ComponentProps> = ({
  getGenericLandingPageQuery,
  uid,
  id,
}) => {
  const { data, loading } = useQuery(getGenericLandingPageQuery, {
    variables: {
      uid,
      id,
    },
  })

  const genericLandingPageInitialState: GenericLandingPageInitialStateTypes = {
    meta: undefined,
    contentSlices: [],
    // ...more initial state settings
  }

  const [genericLandingPageState, setGenericLandingPageState] = useState(genericLandingPageInitialState)

  /*
   * Page data
   */
  useEffect(() => {
    if (isValid(data)) {
      const contentSlices = isValid(body)
        ? data.body.map((slice: SectionTypes) => {
          const { slice_type } = slice
          return {
            type: slice_type,
            ...slice,
          }
        })
        : []

      const meta: MetaProps = {
        title: data.cms_meta_title,
        description: data.cms_meta_description,
        robots: data.contextMeta.robots ?? data.cms_meta_robots,
        canonical: data.cms_meta_canonical_url,
      }
      const newGenericLandingPageState = {
        ...genericLandingPageState,
        meta,
        contentSlices,
      }
      setGenericLandingPageState(newGenericLandingPageState)
    }
  }, [data])

  console.log(genericLandingPageState)

  return (
      <Content
        sections={genericLandingPageState.contentSlices}
        meta={genericLandingPageState.meta}
      />
  )
}

If the query is being fetched from the network everything is fine and Content will be rendered with data. When the data is being triggered a second time and the content is being served from the cache the useEffect hook is triggered and setState is being called with the new data.

Unfortunately the console.log just above the render statement won't contain the data that setState is being called with in the hook, but contains the initialState data the state variable has been initialized with.

If I change fetch policy to 'network-only' everything works fine.

This seems like a bug to me because Reacts logic is working here as long as the query comes through the network.

Does anyone know what is going on here?

[alvesmog]

We are currently facing the same issue when trying to use reactive variables inside a useEffect hook.

The variable is initialized in an external component and updated within the current component. For some reason, the update does not trigger a re-render of the current component.

I have also tried to update the reactive variable from outside the current component and just use it to consume the value, but it doesn't work.

The change in the reactive variable value does not seem to break referential equality under certain circumstances, thus not triggering the useEffect hook.

[edisonmatoso]

I have the same issue with my project, the cache value has changed but the reference stays the same, therefore the useEffect hook is not triggering

[jcreighton]

@edisonmatoso @alvesmog @adriansoovarymms Looks like this issue was happening before changing to useReactiveVar in #7652. If you're able to use the latest version of Apollo Client and confirm this is fixed (or still a bug), please do!

[hwillson]

Let us know if this is still a concern with @apollo/client@latest - thanks!