реакция-аполлон не запускает запрос при первом рендере - PullRequest
0 голосов
/ 16 января 2019

Я создаю приложение 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 находится в моих реквизитах.

enter image description here

Но если я попытаюсь вызвать повторное обновление, запрос будет работать как положено:

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>
    );
  }
}

enter image description here

Это моя конфигурация 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;

Я провел некоторое исследование, и, похоже, в последнее время не произошло каких-либо серьезных обновлений, которые могли бы изменить это поведение. Кто-нибудь знает, почему это может происходить?

...