我在Next中使用动态路由器。js，这是代码

slug.js

import { useQuery } from "urql"
import { GET_PRODUCT_QUERY } from "@/lib/query"
import { useRouter } from "next/router"

/* eslint-disable @next/next/no-img-element */
export default function ProductDetails() {
    //Fetch Slug
    const { query } = useRouter()

    //Fetch Graphql data
    const [results] = useQuery({
        query: GET_PRODUCT_QUERY,
        variables: { slug: query.slug },
    })
    const { data, fetching, error } = results

    //Check for the data coming in
    if (fetching) return <p>Loading...</p>
    if (error) return <p>Oh No.....{error.message}</p>

    return (
        <div>
            <img src="" alt="" />
            <div>
                <h3>Title</h3>
                <p>description</p>
            </div>
            <div>
                <span>Quantity</span>
                <button>Plus</button>
                <p>0</p>
                <button>Minus</button>
            </div>
            <button>Add to cart</button>
        </div>
    )
}

[slug].js的位置是- Frontend/pages/product/[slug]。js

query.js

export const PRODUCT_QUERY = `
query {
  products {
    data {
      attributes {
        title
        description
        price
        slug
        image {
          data {
            attributes {
              formats
            }
          }
        }
      }
    }
  }
}
`

export const GET_PRODUCT_QUERY = `
  query getProduct($slug: String!) {
    products(filters: {slug: {eq: $slug}}) {
      data {
        attributes {
          title
          slug
          description
          price
          image {
            data {
              attributes {
                formats
              }
            }
          }
        }
      }
    }
  }
`

运行它时，控制台显示
tp：//localhost：1337/graphql 400（Bad Request）

我试图建立一个电子商务应用程序与next.js和graphql在前端和stripe在后端。为了获取，我使用了Urql。我试图通过使用useRouter()方法从url中获取slug，然后在useQuery()的变量参数中传递{ query }，在此之后我开始看到POST 400错误。