Я строю на NEXTJS и использую CMS graphql. Когда я создаю службу для извлечения данных из Graphql с помощью API, я получаю сообщение об ошибке «Ошибка сервера TypeError: поддерживаются только абсолютные URL-адреса.

Эта ошибка произошла при создании страницы. Любые журналы консоли будут отображаться в окне терминала. "

Кроме того, в консоли я получаю ошибку 500, которая указывается в node_modules. «ПОЛУЧИТЬ http: // localhost: 3000/500 (внутренняя ошибка сервера) index.js? 46cb: 323 Uncaught at getNodeRequestOptions»

NEXT_PUBLIC_GRAPHCMS_ENDPOINT находится в файле .env, который я вставил свой URL-адрес из своего API. Вот два файла, которые, как мне кажется, вызывают у меня проблему.

УСЛУГИ / 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, и отображаю ее на странице.

Страниц / 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 }
  }
}

Я использую css попутного ветра, так что это любой забавный код в className. Не уверен, что я делаю неправильно или что-то обновил NextJS, но я ничего не могу найти в документации. Любая помощь будет принята с благодарностью.

0
TastyWavesNCoolBuzz 27 Ноя 2021 в 06:13
 – 
OptimBro
27 Ноя 2021 в 06:28

1 ответ

Лучший ответ

Вам нужно поместить GRAPHCMS_ENDPOINT в ваш файл .env

  GRAPHCMS_ENDPOINT=YOUR_GRAPHCMS_URL

Затем next.js преобразует его для использования NEXT_PUBLIC_GRAPHCMS_ENDPOINT в вашем файле интерфейса. Помните, что это все равно будет GRAPHCMS_ENDPOINT в ваших маршрутах API и getServersideprops и getStaticProps.

Для получения дополнительной информации ознакомьтесь с документами.

0
Pranta 27 Ноя 2021 в 06:28
Я чувствую себя тупым, этот файл оказался в другой папке. Я переместил его в корень, и это решило. Спасибо, что заставили меня дважды проверить это.
 – 
TastyWavesNCoolBuzz
27 Ноя 2021 в 08:18