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

Posted 2023-03-08

【中文标题】无法使用 React-Query + Graphql-Request 在 useQuery 中传递参数

【英文标题】：Can't pass arguments in useQuery with React-Query + Graphql-Request

【发布时间】：2021-03-28 07:10:06

【问题描述】：

我有点卡住了。我正在使用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)

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

【参考方案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
    
  );

【讨论】：

函数结束时enabled: !!postId做了什么？

@Shahriar 查看启用的here 的文档。