Next.js调用GraphQL CMS接口报Only absolute URLs are supported如何解决

你遇到的TypeError: Only absolute URLs are supported报错核心原因是调用graphql-request的request方法时，传入的接口地址graphqlAPI不是合法的带http/https前缀的绝对路径，本质是环境变量读取异常导致的，可按以下步骤逐一排查修复：

排查修复步骤 #

• 检查.env类配置文件的位置和文件名：文件必须放在项目根目录（和package.json同级），Next.js 13+ 若使用App Router建议使用.env.local文件，避免配置不加载问题
• 检查环境变量配置格式：确认变量名完全匹配NEXT_PUBLIC_GRAPHCMS_ENDPOINT，无拼写、大小写错误，变量值前后没有多余空格，且值本身必须带https://或http://协议前缀，不能直接填写域名
• 增加环境变量校验逻辑，可在services/index.js中增加判定代码，提前识别配置问题，修改后代码如下：

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

// 新增配置校验
if (!graphqlAPI || !graphqlAPI.startsWith('http')) {
  throw new Error(`GraphQL接口地址配置错误，当前读取值为：${graphqlAPI}，请检查环境变量配置`);
}

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

• 所有配置修改完成后，必须重启Next.js开发服务，环境变量仅在服务启动时加载，运行中修改.env文件不会自动生效
• 若部署到线上平台，需要在对应平台的环境变量配置面板手动添加NEXT_PUBLIC_GRAPHCMS_ENDPOINT配置，线上部署不会读取本地的.env文件

内容的提问来源于stack exchange，提问作者TastyWavesNCoolBuzz