Я создаю приложение React, используя graphql и Reaction-Apollo.
Я работал с этими библиотеками и раньше, и, исходя из моего опыта, при добавлении запроса с использованием graphql
HOC к компоненту запрос должен запускаться автоматически при первом рендеринге. Но по какой-то причине это больше не работает.
У меня есть этот простой компонент:
import React from 'react';
import { graphql } from 'react-apollo';
import { getUser } from '../common/graphql/queries/user.query';
class Home extends React.Component {
render() {
const { classes = {} } = this.props;
console.log(this.props);
return (
<div className={classes.home}>
Hello World!
</div>
);
}
}
export default graphql(getUser, { name: 'getUser' })(Home);
Я ожидал, что запрос getUser
сработает автоматически, но он вообще не запускается. Если я проверяю свою вкладку сети в Chrome, я не обращаюсь к конечной точке graphql, даже думая, что объект getUser
находится в моих реквизитах.
Но если я попытаюсь вызвать повторное обновление, запрос будет работать как положено:
class Home extends React.Component {
constructor(props) {
super(props);
this.fetch = true;
}
render() {
const { classes = {} } = this.props;
console.log(this.props);
if(this.fetch) {
this.props.getUser.refetch();
this.fetch = false;
}
return (
<div className={classes.home}>
Hello World!
</div>
);
}
}
Это моя конфигурация apollo:
import url from "url";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { withClientState } from "apollo-link-state";
import { HttpLink } from "apollo-link-http";
import { ApolloLink } from "apollo-link";
import resolvers from "./common/graphql/resolvers";
import * as defaults from "./common/graphql/defaults";
const BASE_URL = process.env.BASE_URL || "http://localhost:8081";
console.log(BASE_URL);
const apollo = () => {
// Server side rendering work around
const httpLinkOptions = { uri: url.resolve(BASE_URL, "graphql") };
const httpLink = new HttpLink(httpLinkOptions);
const cache = new InMemoryCache({
dataIdFromObject: ({ id }) => id
});
const stateLink = withClientState({
cache,
resolvers,
defaults: { ...defaults, user: null, auth: null, categories: [] },
});
const link = ApolloLink.from([
stateLink,
httpLink
]);
const client = new ApolloClient({
link,
cache,
addTypename: false,
dataIdFromObject: ({ id }) => id
});
return client;
};
export default apollo;
Я провел некоторое исследование, и, похоже, в последнее время не произошло каких-либо серьезных обновлений, которые могли бы изменить это поведение. Кто-нибудь знает, почему это может происходить?