Реагировать на результаты запроса GraphQL как на объект без JSX? - PullRequest
Новая
       11

Реагировать на результаты запроса GraphQL как на объект без JSX?

0 голосов
/ 19 января 2019

Я приеду сюда в крайнем случае! Я искал 1-2 недели и ничего не нашел!

Я хочу использовать GraphQL в реакции (у меня есть клиент реакции Apollo и бэкэнд Apollo), но я хочу иметь возможность вызывать запрос и возвращать результаты в виде объекта без необходимости использования компонента или класса .

Я пытался использовать client.query, но, как бы я ни пытался, мне возвращались только обещания.

Я хочу что-то вроде этого:

const myData = какой-то запрос запроса

редактирование:

Хочу, чтобы я хотел передать массив объектов в компонент, который затем отобразит данные так, как я хочу.

Примером может быть передача списка событий в ячейку календаря для отображения на этот день.

Вот лучший пример того, что я хочу сделать: 

const CustomCellOne = () => (
<Query query={my_query} variables={ vars }>
    {({ loading, error, data }) => {
        const dataPoints = data.blahQuery;

        return (
            <CustomCellTwo data={dataPoints} />
        )
    }}
</Query>
);

1 Ответ

0 голосов
/ 19 января 2019

Сетевые запросы являются асинхронными для предотвращения блокировки пользовательского интерфейса. Fetch API , который Apollo использует внутри системы, использует Promises вместо более традиционных обратных вызовов для обработки асинхронных запросов ресурсов по сети, поэтому API-интерфейс Apollo также основан на Promises.Нет доступных методов, которые позволили бы вам синхронно получить запрос GraphQL - вам просто нужно соответствующим образом структурировать свой код для обработки Promise после его разрешения.

В следующих примерах предполагается, что выправильно настроил экземпляр клиента.Использование then: 

function doSomething () {
  client.query({ query: SOME_QUERY })
    .then(({ data }) => {
      // Use the returned data however you like
    })
    .catch(error => {
      // Handle error
    })
}

Использование async / await: 

async function doSomething () {
  try {
    const { data } = await client.query({ query: SOME_QUERY })
  } catch (error) {
    // Handle error
  }
}

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

...