Detected multiple renderers concurrently rendering the same context provider
Opened this issue · 3 comments
jamesfrye420 commented
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 commented
@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 commented
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 commented
@jonathanmorris180 @jonathanmorris180 check this out, see if this could be useful in your case.