Выполняйте запросы GraphQL последовательно, используя Apollo - PullRequest
Новая
       12

Выполняйте запросы GraphQL последовательно, используя Apollo

0 голосов
/ 26 апреля 2018

Я пытаюсь сделать несколько запросов grahql в серии. Подвох в том, что мне нужно получить ответ от одного и передать его в качестве переменных для следующего.

Я пытался использовать задержку и загрузку. Тем не менее, мои запросы определены в компонентном монтировании, поэтому для него необходимо установить переменные заранее. И поэтому этот подход не работает для меня.

Я не вижу четкого способа сделать это или где-либо еще упомянутое в документации Apollo. Любая помощь будет оценена!

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Я хотел бы обратиться в первую очередь к людям, впервые знакомым с GraphQL: если вы оказались в ситуации, когда у вас есть водопад запросов или n + 1 запросов в GraphQL, это Весьма вероятно, что вы либо не используете API GraphQL правильно, либо ваш API GraphQL плохо разработан. Могут быть единичные случаи использования, когда это единственный способ справиться с ситуацией, и я просто предполагаю, что ОП уже пытался избежать ситуации в целом.

Следующее предназначено для "react-apollo": ">2.1". То же самое может быть достигнуто с помощью 2 graphql HOCs и опции запроса skip. Идея состоит в том, чтобы отложить второй запрос с помощью опции skip, пока не будут доступны данные для первого запроса.

Отказ от ответственности: следующий код не тестируется и служит только для передачи общей идеи или шаблона. 

function MyComponent() {
  return (
    <Query query={QUERY1}>
      {query1 => (
        <Query
          query={QUERY2}
          variables={{ x: query1.data.x }}
          skip={query1.loading}
        >
          {query2 => (
            <div>
              {JSON.stringify({
                query1Data: query1.data,
                query2Data: query2.data
              })}
            </div>
          )}
        </Query>
      )}
    </Query>
  );
}
0 голосов
/ 27 апреля 2018

Вы можете запускать запросы вручную и связывать их в цепочку. 

const { data } = await client.query({
  query: QUERY1,
  variables: { search: "Fruits" }
});

const { data2 } = await client.query({
  query: QUERY2,
  variables: { search: data.apple }
});

Оберните этот код внутри функции async.

...