Detected multiple renderers concurrently rendering the same context provider

[jamesfrye420]

I get the following warning when using this as hoc inside my Next.js app

My Apollo client:

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { NextPageContext } from 'next';
import { withApollo } from 'next-apollo';
import { PaginatedPosts } from '../generated/graphql';

const createClient = (ctx: NextPageContext) =>
  new ApolloClient({
    uri: 'http://localhost:4000/graphql',
    headers: {
      cookie: (typeof window === 'undefined' && ctx?.req?.headers.cookie) || '',
    },
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            posts: {
              keyArgs: [],
              merge(existing: PaginatedPosts | undefined, incoming: PaginatedPosts): PaginatedPosts {
                return {
                  ...incoming,
                  posts: [...(existing?.posts || []), ...incoming.posts],
                };
              },
            },
          },
        },
      },
    }),
    credentials: 'include',
  });

export default withApollo(createClient);

and this is how I am using it inside my pages

import { Box, Button, Flex, Heading, Link } from '@chakra-ui/react';
import { NextPage } from 'next';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import IndexHeader from '../components/IndexHeader';
import Layout from '../components/Layout';
import PostStack from '../components/PostStack';
import { PaginatedPosts, usePostsQuery } from '../generated/graphql';
import withApollo from '../utils/withApollo';

const Index: NextPage = () => {
  const router = useRouter();
  const { data, loading, fetchMore, variables } = usePostsQuery({
    variables: {
      limit: 15,
      cursor: null,
    },
    notifyOnNetworkStatusChange: true,
  });

  const fetchMoreVar = () => ({
    variables: {
      limit: variables?.limit,
      cursor: data?.posts.posts[data?.posts.posts.length - 1]?.createdAt,
    },
  });

  return (
    <Layout>
      <IndexHeader />
      <PostStack
        data={data?.posts as PaginatedPosts | undefined}
        fetchMore={fetchMore}
        fetchMoreVar={fetchMoreVar}
        loading={loading}
        variables={variables}
      />
    </Layout>
  );
};
export default withApollo({ ssr: true })(Index);

on rendering this my console spits out the following warning

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

This warning only shows up in the pages in which ssr is set to true

[jonathanmorris180]

@jamesfrye420 Did you find fix for this? I'm getting the same warning message with a very similar setup:

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { NextPageContext } from "next";
import { withApollo as createWithApollo } from "next-apollo";

const createClient = (ctx?: NextPageContext) =>
  new ApolloClient({
    uri: process.env.NEXT_PUBLIC_API_URL as string,
    connectToDevTools: true,
    credentials: "include",
    headers: {
      cookie:
        (typeof window === "undefined"
          ? ctx?.req?.headers.cookie
          : undefined) || "",
    },
    cache: new InMemoryCache(),
  });

export const withApollo = createWithApollo(createClient);

Warning message:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

Using:

{
  "dependencies": {
    ...
    "next": "^12.2.3",
    "next-apollo": "^5.0.8"
    ...
  }
}

[jonathanmorris180]

For others encountering this, it looks like this might be due to using React 18. next-with-apollo users seem to also have this issue after upgrading (I just upgraded to v18 yesterday).

[jamesfrye420]

@jonathanmorris180 @jonathanmorris180 check this out, see if this could be useful in your case.