Различные варианты реализации Apollo's Query prop - PullRequest
Новая
       13

Различные варианты реализации Apollo's Query prop

0 голосов
/ 14 декабря 2018

Существуют различные способы (2, о которых я знаю), чтобы использовать новые реквизиты Query и Mutation от 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>

Вот здесь тип сервераDefs и resolvers: 

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); }); 
        }
    },
};

Я предпочитаю вторую реализацию, так как она кажется более гибкой для мутаций и передачи значений состояния.Если я забыл упомянуть что-либо или что-то требует уточнения, просто дайте мне знать.

Приветствия:)

РЕДАКТИРОВАТЬ: я подключаюсь к локальной базе данных postgreSQL с помощью пакета pg-обещания

1 Ответ

0 голосов
/ 14 декабря 2018

Проблема в том, что эти два запроса не совпадают, а второй не правильно отформатирован.Вот первый: 

{
  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
  }
}
...