Unhandled Runtime Error, RefereceError: gpl is not defined. Reactjs, graphql

Question

我正在用 reactjs、graphql 和 nextjs 创建一个博客，但是我运行进入这个错误消息，我似乎无法弄清楚每当我尝试路由到特定的 post 来查看详情

Unhandled Runtime Error
ReferenceError: gpl is not defined

来自下面的代码

services/index.js

import {request, gql} from 'graphql-request'

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT


export const getSimilarPosts = async (categories, slug) => {
    const query = gpl `
        query GetPostDetails($slug: String!, $categories: [String!]){
            posts(
                where: {slug_not: $slug, AND: {categories_some: {slug_in: $categories}}}
                last: 3 
            ){
                title
                featuredImage{
                    url
                }
                createdAt
                slug
            }
        }
    `
    const results = await request(graphqlAPI, query, {categories, slug})
    return results.posts
}

Components/PostWidget.jsx

import React, {useState, useEffect} from 'react'
import moment from 'moment'
import Link from 'next/link'
import {getRecentPosts, getSimilarPosts} from '../services'


const PostWidget = ({categories, slug}) => {
  const [relatedPosts, setRelatedPosts] = useState([])
  useEffect(()=>{
      if(slug){
        getSimilarPosts(categories, slug)
          .then((result)=> setRelatedPosts(result))
      } else {
        getRecentPosts()
          .then((result)=> setRelatedPosts(result))
      }
  }, [slug])

  console.log(relatedPosts)

  return (
    <div className="bg-white shadow-lg rounded-lg p-8 mb-8">
      <h3 className="text-xl mb-8 font-semibold border-b pb-4">
      {slug ? "Related Posts" : "Recent Posts"}
      </h3>
      {relatedPosts.map((post)=>(
        <div key={post.title} className="flex items-center w-full mb-4">
            <div className="w-16 flex-none">
              <img 
                src={post.featuredImage.url} 
                alt={post.title}
                height ="60px"
                width="60px"
                className="align-middle rounded-full"
              />
            </div>
            <div className="flex-grow ml-4">
              <p className="text-grey-500 font-xs">
                {moment(post.createdAt).format('MMM DD, YYYY')}
              </p>
              <Link href={`/post/${post.slug}`} key={post.title} className="text-md">
                  {post.title}
              </Link>
            </div>
        </div>
      ))}
    </div>
  )
}

export default PostWidget

请帮我找出我可能做错了什么

Answer 1

您在此处将 gql 拼错为 qpl：

export const getSimilarPosts = async (categories, slug) => {
    const query = gpl ` // this

Unhandled Runtime Error, RefereceError: gpl is not defined. Reactjs, graphql

Unhandled Runtime Error, RefereceError: gpl is not defined. Reactjs, graphql

reactjs

next.js

graphql