Apollo 服务器查询状态码400错误

Question

尝试使用 apollo、graphql 和 prisma 制作 Nextjs 应用程序。当我尝试在前端查询用户时，收到 400 错误。该查询在阿波罗工作室/沙箱中工作，所以我不知道如何修复它。

错误消息：

Response not successful: Received status code 400

服务器日志中没有任何内容。

schema.ts：

export const  typeDefs = gql`
    type User {
        id: String
        name: String
        email: String
        image: String
    }

    type Query {
        AllUsersQuery: [User]!
    }

我的解析器.ts：

export const resolvers = {
    Query: {
        AllUsersQuery: async (_parent: any, __args: any, context: any) => await context.prisma.user.findMany(),
    },
};

我从 board.tsx 调用它的地方：

const AllUsersQuery = gql`
  query {
      user{
        id
        name
        email
      }
  }
`

const Board = () => {
  const { data, loading, error } = useQuery(AllUsersQuery);

  if (loading) return <div> Loading... </div>
  if (error) return <div> Oops something went wrong: {error.message}</div>

  return (
    <>
      <div>{data?.user.email}</div>
    </>
  )
}

export default Board

响应/请求标头：

XHRPOSThttp://localhost:3000/api/graphql
[HTTP/1.1 400 Bad Request 13ms]

    
POST
    http://localhost:3000/api/graphql
Status
400
Bad Request
VersionHTTP/1.1
Transferred766 B (1.21 kB size)
Referrer Policystrict-origin-when-cross-origin

        
    HTTP/1.1 400 Bad Request

    Access-Control-Allow-Origin: *

    Access-Control-Allow-Credentials: true

    Content-Type: application/json

    Vary: Accept-Encoding

    Content-Encoding: gzip

    Date: Sun, 02 Oct 2022 03:20:09 GMT

    Connection: keep-alive

    Keep-Alive: timeout=5

    Transfer-Encoding: chunked
        
    POST /api/graphql HTTP/1.1

    Host: localhost:3000

    User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:105.0) Gecko/20100101 Firefox/105.0

    Accept: */*

    Accept-Language: en-CA,en-US;q=0.7,en;q=0.3

    Accept-Encoding: gzip, deflate, br

    Referer: http://localhost:3000/board

    content-type: application/json

    Content-Length: 91

    Origin: http://localhost:3000

    Connection: keep-alive

    Cookie: _ga=GA1.1.1971964746.1663710154; next-auth.csrf-token=33c501d5216dea4b6a029d34c13d640814228810867843882008780ce09eb536%7C83d7939882d2f38e49f72a501e895459abb7fbac2fbab0d106c6462fe35cbe7e; next-auth.callback-url=http%3A%2F%2Flocalhost%3A3000%2Flogin; next-auth.session-token=c7358df1-2605-4a34-bb5d-a1091a00b871

    Sec-Fetch-Dest: empty

    Sec-Fetch-Mode: cors

    Sec-Fetch-Site: same-origin

我做错了什么？谢谢

Answer 1

看来您需要清理和翻转一些命名约定。您可能希望在根查询类型上将解析器简单地定义为

users

，这又是您在执行时将在返回的可选 (

data

) 上访问的字段。以这种方式定义查询提供了灵活性；例如，您将来可能会使用简单的

id

或更复杂的输入类型添加过滤器参数。在这种情况下，灵活性的缺乏就变得很明显。

export const  typeDefs = gql`
    type User {
        id: String
        name: String
        email: String
        image: String
    }

    type Query {
       users: [User]!
    }

  // update resolver to reflect schema change on Query
  Query: {
       users: async (_parent: any, __args: any, context: any) => await context.prisma.user.findMany(),
    },

现在，对于您的（当前无过滤器）查询操作，声明

AllUsersQuery

是有意义的，它是您的客户端实现的准确描述。如果您添加了一个参数来获取子集（这需要将解析器更新为

users(ids: [String]): [User]

之类的内容，则可以为该操作提供不同的命名约定 (

UsersByIdsQuery

)

const AllUsersQuery = gql`
  query {
      users {
        id
        name
        email
      }
  }
`

const Board = () => {
  const { data, loading, error } = useQuery(AllUsersQuery);

  if (loading) return <div> Loading... </div>
  if (error) return <div> Oops something went wrong: {error.message}</div>

  return (
    <>
      <div>{data?.users.email}</div>
    </>
  )
}

export default Board

如果您想保持架构、解析器和操作不变，则需要更新架构中反映的查询请求的字段，并以类似方式访问代码中可选数据的该字段。

const AllUsersQuery = gql`
  query {
     AllUsersQuery {
        id
        name
        email
      }
  }