Запрос graphiql приводит к ошибке Apollo, это не функция
У меня есть экспресс-сервер с GraphQL, который работает, когда я перехожу к /graphiql и вручную выполняю поиск. Мой интерфейс React пытается выполнить поиск на сервере. Следующий код должен выполнять запрос асинхронно:
const data = await this.props.client.query({
query: MY_QUERY,
variables: { initials: e.target.value }
});
console.info(data);
Где MY_QUERY определен ранее и представляет собой запрос, который, как я знаю, работает и был протестирован на /graphiql. Чтобы сделать это в моем компоненте React, я экспортирую его как export default withApollo(MyComponent), чтобы он имел переменную client в props.
В файле index.js я определил через Apollo подключение к /graphiql для выполнения запросов:
//link defined to deal with errors, this was found online
const link = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.map(({ message, locations, path }) =>
console.info(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
),
);
if (networkError) console.info(`[Network error]: ${networkError}`);
});
//the httpLink to my GraphQL instance, BASE_URL is defined elsewhere
const httpLink = new HttpLink({
uri: BASE_URL,
headers: {
},
});
//here I define the client linking the GraphQL instance, the cache, and error handling
const client = new ApolloClient({
link: httpLink,
cache,
link
});
При выполнении вышеупомянутого запроса без переменной link, которая обрабатывает ошибку, я получаю 400 Bad Request от сервера (ApolloError.js:37 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400). Поскольку это мне ничего не говорит, здесь, в StackOverflow и на веб-странице Apollo, я нашел указанное выше объявление ошибки, которое выводит [Network error]: TypeError: forward is not a function. Что означает эта ошибка и как ее решить?
Спасибо!
Ответы 1
Конфигурация вашего клиента имеет повторяющееся свойство - вы сначала устанавливаете свойство link на свой HttpLink, а затем снова устанавливаете его на свой ErrorLink. Это означает, что HttpLink полностью игнорируется, и вы передаете только ErrorLink в конфигурацию. Вы видите эту ошибку, потому что ErrorLink, созданный onError, не предназначен для использования сам по себе. Вместо этого он должен быть связан с HttpLink, и это то, что вы должны назначить свойству link.
Эта страница в документации подробно описывает, как правильно составлять ссылки. Вы можете использовать concat, но я предпочитаю ApolloLink.from, так как он позволяет четко показать порядок ваших ссылок:
const errorLink = onError(...)
const httpLink = new HttpLink(...)
const link = ApolloLink.from([
errorLink,
httpLink,
])
const client = new ApolloClient({
link,
cache,
})