I'm having trouble with my NEXTJS blog, Server Error TypeError: Only absolute URLs are supporte-CodePudding

I am building on NEXTJS and using the graphql CMS. When I create a service to pull the data from Graphql using an api I get an error "Server Error TypeError: Only absolute URLs are supported

This error happened while generating the page. Any console logs will be displayed in the terminal window."

Additionally in the console I'm getting a 500 error that states from the node_modules. "GET http://localhost:3000/ 500 (Internal Server Error) index.js?46cb:323 Uncaught at getNodeRequestOptions"

The NEXT_PUBLIC_GRAPHCMS_ENDPOINT is in an .env file that I pasted my url from my api. Here are the two files that I think are giving me the issue.

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;
}

then I take the information gathered by the api and render them on a page.

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

I am using the tailwind css so that is any of the funky code in the className. Not sure what I'm doing wrong or if NextJS updated something but I can't find anything in the documentation. Any help would be greatly appreciated.

CodePudding user response：

You need to put GRAPHCMS_ENDPOINT in your .env file

  GRAPHCMS_ENDPOINT=YOUR_GRAPHCMS_URL

Then next.js will convert it to use NEXT_PUBLIC_GRAPHCMS_ENDPOINT in your frontend file. Remember, it will still be GRAPHCMS_ENDPOINT in your API routes and getServersideprops and getStaticProps.

For more info, check out the docs