"Warning: useLayoutEffect does nothing on the server" appeared since updating to @latest version.

[zakariamofaddel]

*If reverting @apollo/client to @3.3.14, warning disappears
I'm extensively using the getStaticProps method by nextJS in my application and everything was running smoothly, but once I did an update of all the packages, I started seeing this annoying warning.
I reverted to a previous commit and updated packages one by one, thinking it was a material-ui problem. But the warning appeared only after updating @apollo/client.

Intended outcome:
Updating packages, from 3.3.14 to @3.3.16.

Actual outcome:
This is the warning I started getting after the update:

And I noticed mismatches started appearing in the console. This is a rehydration problem probably, but it wasn't there before updating...
example mismatch:

My package.json file:

My Apollo Initialization (from zeit/nextjs apollo example) (The APOLLO_STATE_PROP_NAME variable is just a string = "APOLLO_STATE"):

Versions
Run the following command in your project directory, and paste its (automatically copied to clipboard) results here:

npx envinfo@latest --preset apollo --clipboard:

All the additional packages are not used, I'm only using @apollo/client at the moment.

[benjamn]

@zakariamofaddel Thanks for reporting this! Assigning to @brainkim since this looks like a consequence of #8022.

[brainkim]

@zakariamofaddel Sorry about this! I haven’t used React in a while so I jumped on the opportunity for a synchronous effect hook to fix some other weird reactiveVar issues.

And I noticed mismatches started appearing in the console. This is a rehydration problem probably, but it wasn't there before updating...

Is this something that only appears when you switch versions or could it possibly due to code changes you made as well?

[zakariamofaddel]

No worries @brainkim !

Is this something that only appears when you switch versions or could it possibly due to code changes you made as well?

I have developed for the past 6 hours, after reverting to @3.3.14, and I haven't encountered any of the issues previously mentioned. No warnings, no mismatches.

Even the warning talks about mismatches, I guess it's all connected to that useLayoutEffect...

This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.

[brainkim]

@zakariamofaddel I’m doing some testing and it feels as though the only reason the new useLayoutEffect()-backed useReactiveVar() might be causing client/server mismatches is because you’re calling the reactive var during rendering, which is a React no-no. Of course, I could be wrong about this, but that means that even if we squelch the useLayoutEffect warnings, you might continue to have client/server mismatch errors. We’ll try to have a fix which squashes the warnings soon, but in the meantime, 1. can you make sure you’re not calling reactive variables in the render function? and 2. can you create a small reproduction for the client/server mismatch if this isn’t the case?

[zakariamofaddel]

Thank you for your speed and work, very much appreciated!
I am using a lot the useReactiveVar hook, but I'm not sure at this point if I am doing it the right way, since I'm using functional components, and as this React article states the whole function body is what the render function was in class components:

Note: If you are familiar with React Class Components, you may have noticed that a Functional Component is a React Component without render function. Everything defined in the function's body is the render function which returns JSX in the end.

I'm always using the hook at the top of my functional components, this way,:

But remember that I'm using NextJs' SSG feature on some pages where child components use the useReactiveVar hook.
If I am doing this the correct way and it was not the cause of the mismatch, I will try to create a reproduction repo as soon as possible!

[Mihai-github]

Hi,
Any updates on this issue?
I am facing the same problem with the warnings and I cannot make anything to stop them and I am not sure if this may be an issue that can affect my project or not

This is my implementation (it's a bit different from the one that is above):

import {ApolloClient, InMemoryCache, HttpLink, from} from '@apollo/client';
import {onError} from 'apollo-link-error';
import {useMemo} from 'react';
import {NotificationManager} from 'react-notifications';

const errorLink: any = onError(({graphQLErrors, networkError}: any) => {
if (graphQLErrors) {
graphQLErrors.forEach(({message, locations, path}: any) =>
console.log(
[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path},
),
);
}
if (networkError) {
NotificationManager.error(
'We could not connect to servers backend',
Connection problems,
3000,
);
console.log(networkError.errors);
}
});

const httpLink = new HttpLink({
uri: process.env.APP_BACKEND_URI,
});

const link = from([errorLink, httpLink]);

let apolloClient: any;

export function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === 'undefined', // set to true for SSR
cache: new InMemoryCache(),
link,
connectToDevTools: true,
});
}

export function initializeApollo(initialState = null) {
const _apolloClient = apolloClient ?? createApolloClient();

// If your page has Next.js data fetching methods that use Apollo Client,
// the initial state gets hydrated here
if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();

    // Restore the cache using the data passed from
    // getStaticProps/getServerSideProps combined with the existing cached data
    _apolloClient.cache.restore({...existingCache, ...initialState});
}

// For SSG and SSR always create a new Apollo Client
if (typeof window === 'undefined') return _apolloClient;

// Create the Apollo Client once in the client
if (!apolloClient) apolloClient = _apolloClient;
return _apolloClient;

}

export function useApollo(initialState) {
const store = useMemo(() => initializeApollo(initialState), [initialState]);
return store;
}

export * from './queries';

I Hope will be solved soon or find a temp solution at least.