Describe the bug When I use the Provider for urql client, it seems

That's because <a href="https://github.com/shkim/urql-next13-error/blob/main/src/graph

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Infinite initialization? (with Graphql-codegen and Next.js 13) about urql HOT 4 CLOSED

shkim commented on May 26, 2024 2

Infinite initialization? (with Graphql-codegen and Next.js 13)

from urql.

Comments (4)

JoviDeCroock commented on May 26, 2024

That's because this line should be importing from @urql/next.

Changing your codegen file to be the one underneath should fix the issue at hand.

schema: https://swapi-graphql.netlify.app/.netlify/functions/index
generates:
  ./src/graphql/generated.ts:
    documents: ./src/graphql/documents.graphql
    config:
      urqlImportFrom: "@urql/next"
    plugins:
      - typescript
      - typescript-operations
      - typescript-urql

The second issue here is that you are missing Suspense boundaries, so during SSR it throws and never keeps the GqlProvider alive meaning the state is constantly renewed so changing your layout to be the following should be the second fix.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import GqlProvider from "./GqlProvider";
import { Suspense } from "react";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <GqlProvider>
          <Suspense>
          {children}
          </Suspense>
        </GqlProvider>
      </body>
    </html>
  );
}

from urql.

michaelzadra1 commented on May 26, 2024

I'm experiencing the same issue. I tried the above solution but it didn't resolve the problem.

Strangely enough, what resolves the infinite fetch problem for me is removing export const runtime = "edge"; from my Page components. There seems to be some issue with serving pages from edge fns w/ urql

from urql.

JoviDeCroock commented on May 26, 2024

@michaelzadra1 That sounds like a different issue

from urql.

JoviDeCroock commented on May 26, 2024

Going to close this issue out, feel free to create a new one for the edge issue! 🙌 will need an accompanying reproduction

from urql.

Recommend Projects

Infinite initialization? (with Graphql-codegen and Next.js 13) about urql HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent