无法使用 React-Query + Graphql-Request 在 useQuery 中传递参数

Question

我有点卡住了。我正在使用graphql-request 和react-query，跟随the example code quite closely。我用自己的后端替换了它，当我不使用变量但对值进行硬编码时它可以工作。它也适用于我的 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,
    }
  )
}

接下来是完全相同的代码，但现在之前硬编码的后置ID（“123123123123”）被替换为变量 em> (${postId})。就像described in the example code

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 查询 {\n 帖子(id: 5fda109506038d9d18fa27e2) {\n
id\n 标题\n 内容\n }\n
}\n "}} 在 GraphQLClient。 (commons.js:13039) 在步骤 (commons.js:12930) 在 Object.next (commons.js:12911) 完成时 (commons.js:12902)

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

Answer 1

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

看起来像这样

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

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

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

这是一个在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
    }
  );
}