I'm having trouble with my NEXTJS blog, Server Error TypeError: Only absolute URLs are supported when fetching data from graphql api

Question

我正在构建 NEXTJS 并使用 graphql CMS。当我创建服务以使用 api 从 Graphql 中提取数据时，出现错误“服务器错误类型错误：仅支持绝对 URL

生成页面时发生此错误。任何控制台日志都将显示在终端 window."

此外，在控制台中，我收到 node_modules 中的 500 错误。 "GET http://localhost:3000/ 500（内部服务器错误） index.js?46cb:323 在 getNodeRequestOptions 未捕获

NEXT_PUBLIC_GRAPHCMS_ENDPOINT 位于我从 api 粘贴 url 的 .env 文件中。这是我认为给我带来问题的两个文件。

SERVICES/index.js


import { request, gql } from 'graphql-request';
const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;

export const getPosts = async () => {
    const query = gql `
        query MyQuery {
            postsConnection {
                edges {
                    node {
                        author {
                            bio
                            name
                            id
                            photo {
                            url
                            }
                        }
                        createdAt
                        slug
                        title
                        excerpt
                        featuredImage {
                            url
                        }
                        categories {
                            name
                            slug
                        }
                    }
                }
            }
        }
    `
    const result = await request(graphqlAPI, query)
    return result.postsConnection.edges;
}

然后我获取 api 收集的信息并将它们呈现在页面上。

pages/index.js

import Head from 'next/head'
import { PostCard, Categories, PostWidget } from '../components';
import { getPosts } from '../services';

export default function Home( { posts } ) {
  return (
    <div className="container mx-auto px-10 mb-8">
      <Head>
        <title>My Website name</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div className="lg:col-span-8 col-span-1">
          {posts.map ((post, index) => <PostCard post={post} key={post.title} /> )}
        </div>
        <div className="lg:col-span-4 col-span-1">
          <div className="lg:sticky relative top-8">
            <PostWidget />
            <Categories />
          </div>
        </div>
      </div>
    </div>
  )
}

export async function getStaticProps() {
  const posts = (await getPosts()) || [];

  return {
    props: { posts }
  }
}

我正在使用 tailwind css 所以这是 className 中的任何时髦代码。不确定我做错了什么，或者 NextJS 是否更新了某些内容，但我在文档中找不到任何内容。任何帮助将不胜感激。

Answer 1

您需要将 GRAPHCMS_ENDPOINT 放入您的 .env 文件

  GRAPHCMS_ENDPOINT=YOUR_GRAPHCMS_URL

然后 next.js 会将其转换为在您的前端文件中使用 NEXT_PUBLIC_GRAPHCMS_ENDPOINT。记住，在你的 API 路由和 getServersideprops 和 getStaticProps 中它仍然是 GRAPHCMS_ENDPOINT。

有关详细信息，请查看 docs

I'm having trouble with my NEXTJS blog, Server Error TypeError: Only absolute URLs are supported when fetching data from graphql api

I'm having trouble with my NEXTJS blog, Server Error TypeError: Only absolute URLs are supported when fetching data from graphql api

javascript

reactjs

graphql

next.js