Использовать внешний сервис GraphQL в приложении реакции, используя Apollo Client - PullRequest
Новая
       7

Использовать внешний сервис GraphQL в приложении реакции, используя Apollo Client

0 голосов
/ 11 марта 2020

Как мне вызвать внешнюю службу GraphQL, расположенную по адресу https://api.someothersite.com/graphql, используя клиент Apollo или сервер Apollo?

Просмотр Сервер Apollo документы, я не мог найти, как вызвать внешний API. Для определения new ApolloServer() требуется как минимум схема, которая уже определена во внешнем API, который я вызываю. Похоже, что Apollo предполагает, что вы определяете все на локальном сервере, которым вы управляете (в частности, схемы и преобразователи), но это не мой вариант использования. У нас есть совершенно отдельный бэкэнд GraphQL, который должен вызывать клиент, и это не REST API (в противном случае я мог бы попытаться использовать Источники данных ) компании Apollo.

Я попытался вызвать API от клиента, но продолжал сталкиваться с проблемами CORS. Кроме того, вызов API с сервера кажется более безопасным. Ошибки CORS существуют по какой-то причине.

Мне удалось заставить все это работать, используя node-fetch api на моем express сервере. Что-то вроде 

app.post('/graphql', (req, res) => {
  fetch('https://api.someothersite.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      "Authorization": "Bearer AUTHORIZATION_TOKEN",
    },
    body: JSON.stringify({
      query: `
        {
          user {
            id
            email
          }
        }
      `
    }),
  })
    .then(res => res.json())
    .then(response => {
      console.log("response\n", response); // The response shows in the terminal
      return res.send(response)
    });
})

В клиенте, однако, я не могу получить доступ к ответу с помощью крюка Аполлона useQuery. Я создаю экземпляр ApolloClient следующим образом: 

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  link: new HttpLink({
    uri: "http://localhost:3000/graphql",
  }),
});

Затем я использую gql для запроса: 

const GET_USER_DETAILS = gql`
  query {
    user {
      id
      email
    }
  }
`;

Затем следует хук: 

useQuery(GET_USER_DETAILS, {
  onCompleted: res => {
    console.log("res\n", res);
  },
  onError: error => {
    console.log("error\n", error);
  },
});

В своем сетевом ответе я вижу данные о возвращаемом пользователе. Но res не определено в этом компоненте, который использует useQuery.

...