Apollo 的 Query 道具的不同实现

Posted 2023-03-10

【中文标题】Apollo 的 Query 道具的不同实现

【英文标题】：Different implementaions of Apollo's Query prop

【发布时间】：2019-05-15 06:21:37

【问题描述】：

有不同的方法（我知道的 2 种）可以使用 Apollo 的新 Query 和 Mutation 道具。但是我只能成功实现其中一个。

在 Query 属性中定义查询，如下所示：

 <Query query=gql`
          
            getStudies
              studies_id
              name_studies
              lab_studies
              objective_studies
              active_studies
            
          
          `>
            ( loading, error, data ) => 
              if (loading) return <div>Fetching</div>
              if (error) return <div>Error</div>
              const studiesToRender = data.getStudies;
              return(
              <div>
                studiesToRender.map(study => <Study key=study.studies_id study=study/>)</div>    
              )
            
          </Query>

工作并将我的数据从数据库中取回以进行渲染

但是当我尝试将查询作为预格式化对象传递时，会导致状态 400 错误请求错误：

const LIST_STUDIES = gql`
  
    ListStudies
      getStudies 
        studies_id
        studies_name
        studies_lab
        studies_objective
        studies_active
      
    
  `
....
 <Query query=LIST_STUDIES>
            ( loading, error, data ) => 
              if (loading) return <div>Fetching</div>
              if (error) return <div>Error</div>
              const studiesToRender = data.ListStudies.getStudies;
              return(
              <div>
                studiesToRender.map(study => <Study key=study.studies_id study=study/>)</div>    
              )
            
          </Query>

这是服务器端 typeDefs 和解析器：

export const typeDefs = `
    type Study 
        studies_id: ID
        name_studies: String
        lab_studies: String
        objective_studies: String
        active_studies: String
    

    type Query 
        getStudy(studies_id: ID!): Study
        getStudies: [Study]
    
    `;

export const resolvers =  
    Query: 
        getStudies: () => 
            return  db.many ( 'SELECT * FROM po1dev_v0022.studies')
                // .then(data =>  console.log( data); )  
                .then(data =>  return data; ) 
                .catch(error =>  console.log('SELECT ALL ERROR: ', error); ); 
        
    ,
;

我更喜欢第二种实现方式，因为它对于突变和传递状态值似乎更灵活。如果我忘记提及任何事情或需要澄清的事情，请告诉我。

干杯:)

编辑：我正在使用 pg-promise 包连接到本地 postgreSQL 数据库

【问题讨论】：

这些是不同的查询还是什么？一个有ListStudies。如果它应该是查询名称，请像这样使用它：gql'query ListStudies ...

我不知道 ListStudies 是什么意思。我一直在关注这个howtographql.com/react-apollo/2-queries-loading-links，但我不明白为什么该级别被添加到查询定义中。但是删除它并不能神奇地使事情起作用

【参考方案1】：

问题是这两个查询不一样，第二个查询格式不正确。这是第一个：

  getStudies 
    studies_id
    name_studies
    lab_studies
    objective_studies
    active_studies
  

第二个：

  ListStudies 
    getStudies 
      studies_id
      studies_name
      studies_lab
      studies_objective
      studies_active
    
  

第二个查询用一对不必要的大括号括起来。

GraphQL 在编写允许您省略操作名称和操作类型（query、mutation 或 subscription）的文档时允许使用速记符号。如果省略操作类型，则假定该操作是查询。在实践中避免使用速记符号是一种很好的做法，并且始终包含操作的名称和类型。生成的查询将如下所示：

query SomeOperationName 
  getStudies 
    studies_id
    name_studies
    lab_studies
    objective_studies
    active_studies
  

【讨论】：

我不确定我是否遵循。但我的问题可能不清楚。使用第一个代码块中的查询定义，如何在 之外声明该函数，因为在第二个代码块中实现不佳。

您可以定义一个名为LIST_STUDIES 的变量并像您正在做的那样将其传入。所有这些代码都非常好。问题是您在定义 LIST_STUDIES 时使用的实际查询无效（并且与您在 Query 组件本身中定义它时发送的查询不同）。

噢，我的天啊....好吧，我想我要暂时禁止自己离开这里了。谢谢你这么亲切丹尼尔:)