3

我有点卡住了。我正在使用带有react-query的graphql-request ，非常严格地遵循示例代码。我用自己的后端替换了它，当我不使用变量但对值进行硬编码时它可以工作。它也适用于我的 GraphiQL 测试环境。

所以这样做有效：

export default function usePost(postId) {
  return useQuery(
    ["post", postId],
    async () => {
      const { post } = await request(
        endpoint,
        gql`
          query {
            post(id: "123123123123") { // <--- with the id hard-coded, it works
              id
              heading
              content
            }
          }
        `
      )

      return post
    },
    {
      enabled: !!postId,
    }
  )
}

下面是完全相同的代码，但现在之前硬编码的 post-id ("123123123123") 被一个变量( ${postId}) 替换。完全如示例代码中所述

export default function usePost(postId) {
  return useQuery(
    ["post", postId],
    async () => {
      const { post } = await request(
        endpoint,
        gql`
          query {
            post(id: ${postId}) { // <--- with the ${postId} variable, things break, but it's exactly the same syntax as in the react-query example & it works in my graphiql backend. Also console-logged the postId, and it is correct
              id
              heading
              content
            }
          }
        `
      )

      return post
    },
    {
      enabled: !!postId,
    }
  )
}

错误响应是：

commons.js:46154 错误：语法错误：预期:，找到): {"response":{"errors":[{"message":"语法错误：预期:, 找到)","locations":[{" line":3,"column":46}]}],"status":400},"request":{"query":"\n query {\n post(id: 5fda109506038d9d18fa27e2) {\n
id\n GraphQLClient 的标题\n 内容\n }\n
}\n "}}。(commons.js:13039) 在步骤 (commons.js:12930) 在 Object.next (commons.js:12911) 在完成 (commons.js:12902)

我想这是我弄错了一些语法？还是与现在缺少引号的事实有关？虽然示例代码也没有做任何不同的事情......真的不确定了，但实际上是一行打破了这一切，我无法弄清楚。

4

1 回答 1

1

您的 id5fda109506038d9d18fa27e2看起来是一个字符串，但您没有将它作为字符串传递给您的后端，这就是您收到语法错误的原因。

看起来像这样

query {
  post(id: 5fda109506038d9d18fa27e2) {
    id
    title
    body
  }
}

注意 id 周围没有引号吗？例如"5fda109506038d9d18fa27e2"。您也可以使用整数作为 id，我只是想说明您实际上并没有传递整数。在此处阅读有关标量类型的更多信息。

我建议您按照 graphql 的意图传递变量，而不是使用字符串插值。这将有助于避免这个问题。在此处阅读有关 graphql 中变量的更多信息。

以下是在 graphql 中传递变量的示例：

query Post($id: ID!) {
  post(id: $id) {
    id
    title
    body
  }
}

以下是使用您的代码的外观：

function usePost(postId) {
  return useQuery(
    ["post", postId],
    async () => {
      const { post } = await request(
        endpoint,
        gql`
          query Post($id: ID!) {
            post(id: $id) {
              id
              title
              body
            }
          }
        `,
        { id: postId }
      );
      return post;
    },
    {
      enabled: !!postId
    }
  );
}
于 2020-12-17T16:05:09.710 回答