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

default discord avatar
taun2160
2 months ago
13
PAYLOAD_PUBLIC_SERVER_URL=http://localhost:4000
PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000

are defined within the Nextjs .env file.



?



Repo:

https://github.com/taunhealy/payloadcms_melex_next




page.tsx


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,
    }),
  }
}


Is this where the error lies?



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())


I changed the .env from PAYLOAD to NEXT and it works. Touh the slug isn't loading 'page1'...



I may open a new thread if I can't solve it.

  • default discord avatar
    notchr
    2 months ago

    Good morning @taun2160



    Hmm, what is the issue you are having?

  • default discord avatar
    taun2160
    2 months ago

    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
  • default discord avatar
    notchr
    2 months ago

    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}`)
  • default discord avatar
    taun2160
    2 months ago

    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?

    image.png
  • default discord avatar
    notchr
    2 months ago

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



    You can also check your network requests in the dev tools

  • default discord avatar
    taun2160
    2 months ago
    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
    }
  • default discord avatar
    notchr
    2 months ago

    Should be in the browser console I believe

  • default discord avatar
    taun2160
    2 months ago

    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
  • default discord avatar
    notchr
    2 months ago
  • default discord avatar
    taun2160
    2 months ago

    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.
    image.png
  • default discord avatar
    notchr
    2 months ago

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



    @jesschow any ideas on this one?

  • default discord avatar
    2me2you
    last month

    @taun2160 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?

  • default discord avatar
    taun2160
    last month

    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
Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.