Nextjs 13 beta vercel static build error using Wordpress GraphQL

Question

I faced a problem while creating static pages in Next JS with GraphQL requsts using fetch.

I've created page where I render list with over 100 items and also created static dynamic pages for those items using generateStaticParams function provided by Next.

Local build was done without any issues, but when I deployed it to Vercel, build crashed. I am wondering if the problem is somewhere in WordPress.

To check it, I replaced those static pages with data from https://jsonplaceholder.typicode.com/ - free fake API. And with that API everything works fine.

Error that appeared during vbercel build:

I would be grateful if someone could help me with this. Thanks :)

I tried different API to check if this error will also happen, but everything worked fine.

My code inside [slug]/page.tsx:

import { getTeachingBySlug, getTeachings } from "@/services"
import { WPSerializer } from "@/utils"

export const generateStaticParams = async () => {
    const teachings = await getTeachings()
    const { teachingList } = WPSerializer(teachings)

    return teachingList.map((teaching) => ({
        slug: teaching.slug,
    }))
}

const SingleTeaching = async ({ params }: { params: { slug: string } }) => {
    const teachingSingle = await getTeachingBySlug(params.slug)

    return (
        <div>
            <h1>
                Single Teaching
            </h1>
            <h2>{teachingSingle.documentBy.title}</h2>
        </div>
    )
}

export default SingleTeaching

getTeachings function look like that:

const getTeachings = async (restOptions?: {}): Promise<WPDocuments> => {
    const response = await fetch("https://some-wp-site-base-url/graphql", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            query: `
            query GetTeachings {
                documents(first: 1000) {
                    edges {
                        node {
                            title
                            slug
                            link
                            nauczania {
                                pdfFile
                                mediaUrlLink
                                file
                                description
                            }
                        }
                    }
                }
            }
            `,
            variables: {},
            ...restOptions
        })
    })

    const data = await response.json()

    return data.data
}

export default getTeachings

And also getTeachingBySlug:

import { WPDocumentBySlug } from "@/types"

const getTeachingBySlug = async (slug: string, restOptions?: {}): Promise<WPDocumentBySlug> => {
  const response = await fetch("https://some-wp-site-base-url/graphql", {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: `
        query TeachingBySlug ($slug: String = "") {
          documentBy(slug: $slug) {
            title
            nauczania {
              pdfFile
              mediaUrlLink
              file
            }
            link
          }
        }
      `,
      variables: { slug }
    }),
    ...restOptions
  })

  const data = await response.json()

  return data.data
}

export default getTeachingBySlug

My operating system: Windows 11 Node version: 18.12 Next version: 13.1.6

score 0 · Answer 1 · answered Feb 19 '23 at 23:24

0

The issue appears to be with using fetch in Server Components.

You can either use axios OR inside next.config.js set:

module.exports = {
  experimental: {
    enableUndici: true
  }
}

answered Feb 19 '23 at 23:24

Wesley LeMahieu

2,296
1
12
8

Hey, thank you for your answer, I will take a look of that. But can we use axios with "next" options, like they are showing us using fetch in [Next Docs](https://beta.nextjs.org/docs/api-reference/fetch)? For example, to make ISR etc.? – Luke Luke Feb 20 '23 at 17:44
Unfortunately, after updating next.config.js, I have still the same error :-| Later on I will try use axios instead. – Luke Luke Feb 20 '23 at 17:52
My apologies! You're correct - I see further down in that issue I linked the issue was resolved in v13.0.2 and you are on 13.1.6. I also have no issues with `fetch` inside my server components. Looking at the error, it seems we should look inside `server/app/(platform)/materialy/nauczania/[slug]/page.js` on line 437. Are you able to find and share the contents of that file? – Wesley LeMahieu Feb 20 '23 at 18:13
Of course :) I updated my post above and added my code there ;) – Luke Luke Feb 20 '23 at 19:11
Do you have access to the GraphQL server configuration code? It does seem like the remote endpoint `"https://some-wp-site-base-url/graphql"` is mis-configured since it's returning "other side closed". Your fetch looks fine. – Wesley LeMahieu Feb 20 '23 at 19:31
Yes, I have. I could easily work with this endpoint locally and with local build app. I'm not sure what should I check on WordPress to know the root of the problem :/ I don't like WP :D But I wanted to use the database from my friend's WP website to make a clone of it in NextJS and eventually replace the website with NextJS. So that I installed WP plugins for graphql: `WP GraphQL` and `WPGraphQL for Advanced Custom Fields` – Luke Luke Feb 20 '23 at 19:45
You know, funny part is that everything works fine when I choose about 20 static pages, but error occurres when there are more static params. That's weird. I will also play around with ISR and check how it behaves. – Luke Luke Feb 20 '23 at 19:51

Nextjs 13 beta vercel static build error using Wordpress GraphQL

1 Answers1