Apollo查询支持的不同实现

Question

有两种不同的方式(据我所知)来使用Apollo的新查询和突变道具。然而，我只能成功地实现其中的一个。

在查询属性中定义查询如下：

 <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数据库

Answer 1

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

{
  getStudies {
    studies_id
    name_studies
    lab_studies
    objective_studies
    active_studies
  }
}

第二个是：

{
  ListStudies {
    getStudies {
      studies_id
      studies_name
      studies_lab
      studies_objective
      studies_active
    }
  }
}

第二个查询包含在一对不必要的花括号中。

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

query SomeOperationName {
  getStudies {
    studies_id
    name_studies
    lab_studies
    objective_studies
    active_studies
  }
}