Error [TypeError]: Failed to parse URL from undefined/api/graphql?pages at Object.fetch

taun2160last year

13

PAYLOAD_PUBLIC_SERVER_URL=http://localhost:4000
PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000

import { notFound } from 'next/navigation'
import { RenderBlocks } from '@/components/RenderBlocks'
import React from 'react'
import { fetchPage, fetchPages } from '../../../graphql'
import { Metadata } from 'next'
import { mergeOpenGraph } from '@/seo/mergeOpenGraph'

const Page = async ({ params: { slug } }: { params: { slug: string | string[] } }) => {
  const page = await fetchPage(slug)

  if (!page) return notFound()

  return (
    <React.Fragment>
      <RenderBlocks blocks={page.layout} />
    </React.Fragment>
  )
}

export default Page

export async function generateStaticParams() {
  const pages = await fetchPages()

  return pages.map(({ breadcrumbs }) => ({
    slug: breadcrumbs?.[breadcrumbs.length - 1]?.url?.replace(/^\/|\/$/g, '').split('/'),
  })) 
}

export async function generateMetadata({ params: { slug } }): Promise<Metadata> {
  const page = await fetchPage(slug)

  const ogImage =
    typeof page?.meta?.image === 'object' &&
    page?.meta?.image !== null &&
    'url' in page?.meta?.image &&
    `${process.env.NEXT_PUBLIC_CMS_URL}${page.meta.image.url}`

  return {
    title: page?.meta?.title || 'Payload CMS',
    description: page?.meta?.description,
    openGraph: mergeOpenGraph({
      title: page?.meta?.title || 'Payload CMS',
      description: page?.meta?.description,
      url: Array.isArray(slug) ? slug.join('/') : '/',
      images: ogImage
        ? [
            {
              url: ogImage,
            },
          ]
        : undefined,
    }),
  }
}

export const fetchPage = async (incomingSlugSegments?: string[]): Promise<Page | null> => {
  const slugSegments = incomingSlugSegments || ['home']
  const slug = slugSegments.at(-1)
  const { data, errors } = await fetch(
    `${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      next,
      body: JSON.stringify({
        query: PAGE,
        variables: {
          slug,
        },
      }),
    },
  ).then(res => res.json())

• 

  notchrlast year

  Good morning

  @479030528084017165
  
  

  Hmm, what is the issue you are having?

• 

  taun2160last year

  Hi Chris.

  page1:1     GET http://localhost:3000/page1 500 (Internal Server Error)
  index.js:634 Uncaught TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11)

  
  
  

  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined

• 

  notchrlast year

  Hmm, that seems like your API hit an error

  
  
  

  Where does that fetch occur?

  
  
  

  ah wait I see it

  
  
  

  Can you log out the value of

  ${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}

  
  
  

  console.log(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`)

• 

  taun2160last year

  It's compiling, brb

  
  
  

   wait compiling...
  - warn Fast Refresh had to perform a full reload due to a runtime error.
  - event compiled client and server successfully in 437 ms (606 modules)
  - warn Fast Refresh had to perform a full reload due to a runtime error.
  - wait compiling...
  - warn Fast Refresh had to perform a full reload due to a runtime error.
  - event compiled client and server successfully in 304 ms (568 modules)
  - wait compiling...
  - event compiled successfully in 137 ms (324 modules)
  - warn Fast Refresh had to perform a full reload due to a runtime error.
  - wait compiling /(pages)/[...slug]/page (client and server)...
  - event compiled successfully in 157 ms (282 modules)
  - wait compiling /favicon.ico/route (client and server)...
  - event compiled successfully in 149 ms (333 modules)

  
  
  

  I think it's working

  
  
  

  Nevermind, it just crashed with error:

  
  

  page1:1     GET http://localhost:3000/page1 500 (Internal Server Error)
  index.js:634 Uncaught TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11)

  
  
  

  It's also running very slowly?
• 

  notchrlast year

  Are you able to log the url that is being fetched?

  
  
  

  You can also check your network requests in the dev tools

• 

  taun2160last year

  const ogImage =
      typeof page?.meta?.image === 'object' &&
      page?.meta?.image !== null &&
      'url' in page?.meta?.image &&
      console.log(`${process.env.NEXT_PUBLIC_CMS_URL}/api/graphql?page=${slug}`)

  That's what I have. SHould it show inthe Vscode console or web browser console?

  
  
  

  - wait compiling /favicon.ico/route (client and server)...
  - event compiled successfully in 149 ms (333 modules)
  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined
  }
  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined
  }
  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined
  }
  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined
  }
  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined
  }
  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined
  }
  - error Error [TypeError]: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11) {
    digest: undefined
  }

• 

  notchrlast year

  Should be in the browser console I believe

• 

  taun2160last year

  Doesn't look like it:

  GET http://localhost:3000/page1 500 (Internal Server Error)
  index.js:634 Uncaught TypeError: fetch failed
      at Object.fetch (node:internal/deps/undici/undici:11413:11)
  getServerError @ client.js:1
  eval @ index.js:634
  setTimeout (async)
  hydrate @ index.js:622
  await in hydrate (async)
  eval @ next-dev.js:48
  Promise.then (async)
  eval @ next-dev.js:42
  ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1690375606173:181
  options.factory @ webpack.js?ts=1690375606173:716
  __webpack_require__ @ webpack.js?ts=1690375606173:37
  __webpack_exec__ @ main.js?ts=1690375606173:1138
  (anonymous) @ main.js?ts=1690375606173:1139
  webpackJsonpCallback @ webpack.js?ts=1690375606173:1388
  (anonymous) @ main.js?ts=1690375606173:9
  DevTools failed to load source map: Could not load content for chrome-extension://ppkojackhibeogijphhfnamhemklmial/js/page.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
  websocket.js:52 [HMR] connected
  2DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_check.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
  websocket.js:52 [HMR] connected

• 

  notchrlast year

  ah

  
  
  

  does

  http://localhost:3000/page1

  exist?

• 

  taun2160last year

  Ya

  
  
  

  How can I run both servers at the same time? I've just started the Payload server and the Nextjs server stopped working?

  
  
  

  VM49:5 crbug/1173575, non-JS module files deprecated.
• 

  notchrlast year

  Hmm, since this is Next.js related I may not be the best to help out here

  
  
  @854377910689202256

  any ideas on this one?

• 

  2me2youlast year

  @479030528084017165

  were you able to solve this? I'm experiencing the same issue. Weirdly enough, I experience this when I have multiple richtext in my page. It's such a hassle that I am not able to navigate to the same slug once I get the error and I needed to create a different page with a different slug.

  
  
  

  Anyone got ideas?

• 

  taun2160last year

  I've got no idea. I'm still stuck on this.

  
  
  

  If you figure it out please keep us posted.

  
  
  

  I've started a new thread -

  https://discord.com/channels/967097582721572934/1141709489175793767