Реакция: данные не отображаются до обновления страницы - PullRequest
Новая
       13

Реакция: данные не отображаются до обновления страницы

0 голосов
/ 18 февраля 2019

В настоящее время я создаю простой рабочий процесс CRUD с использованием React и GraphQL.После того, как я создаю объект (в данном случае article, который имеет только id, title и description.), Я возвращаюсь на страницу Index, которая отображает все созданные в данный момент статьи.Моя проблема в том, что после создания статьи страница индекса не отображает созданную статью, пока я не обновлю страницу.Я использую apollo для запроса api graphql и отключил кеширование на нем, поэтому я не уверен, почему данные не отображаются.Я установил точки останова в моей ArticlesIndex функции componentDidMount и убедился, что она выполняется, и во время выполнения база данных включает только что добавленную article.

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

Мой ArticlesCreate компонент вставляет новую запись и перенаправляет обратно на компонент ArticlesIndex следующим образом:

handleSubmit(event) {  
    event.preventDefault();  
    const { client } = this.props;

    var article = {
      "article": {
        "title": this.state.title,
        "description": this.state.description
      }
    };

    client
    .mutate({ mutation: CREATE_EDIT_ARTICLE, 
      variables: article })
    .then(({ data: { articles } }) => {
        this.props.history.push("/articles");  
    })
    .catch(err => {
        console.log("err", err);
    });

  }
}

тогда мой ArticlesIndex компонент получает все статьи из БД следующим образом: 

componentDidMount = () => {
    const { client } = this.props; //client is an ApolloClient
    client
    .query({ query: GET_ARTICLES })
    .then(({ data: { articles } }) => {
        if (articles) {
          this.setState({ loading: false, articles: articles });
        }
    })
    .catch(err => {
        console.log("err", err);
    });
};

, и я установил ApolloClient, чтобы он не кэшировал данные, как в моем App.js какследует: 

const defaultApolloOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
}

export default class App extends Component {
  displayName = App.name;

  client = new ApolloClient({
    uri: "https://localhost:44360/graphql",
    cache: new InMemoryCache(),
    defaultOptions: defaultApolloOptions
  });

  //...render method, route definitions, etc
}

Почему это происходит и как я могу это решить?

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Похоже, что это проблема с ApolloBoost, не поддерживающим defaultOptions, как отмечено в этой проблеме github .Чтобы решить проблему, я изменил: 

const defaultApolloOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
}

export default class App extends Component {
  displayName = App.name;

  client = new ApolloClient({
    uri: "https://localhost:44360/graphql",
    cache: new InMemoryCache(),
    defaultOptions: defaultApolloOptions
  });

  //...render method, route definitions, etc
}

На: 

const client = new ApolloClient({
  uri: "https://localhost:44360/graphql"
});

client.defaultOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  },
};

export default class App extends Component {
    //....
}
0 голосов
/ 18 февраля 2019

Я вижу, что вы получаете данные и устанавливаете состояние компонентов при первоначальном монтировании.Скорее всего, когда вы перенаправляете, он не запускает хук componentDidMount lifecylcle, поскольку он уже смонтирован, если в этом проблема, попробуйте использовать componentDidUpdate хук жизненного цикла, чтобы ваш компонент знал, что произошло обновление, и переустановитеданные.

...