Повторное получение Apollo при использовании с React

Мы разрабатываем наше полное первое приложение с Apollo, и у нас возникла проблема при его использовании с реактивным маршрутизатором.

Мы используем новый компонент, и проблема заключается в том, что мы меняем маршрут приложения, в котором оно использует данные, которые были изначально получены (даже если данные были изменены на сервере):

import React from 'react';
import { Query } from 'react-apollo';

import { GET_FAVORITE_JOBS } from './graphql';
import FavoriteJobList from './stateless';

export default () => (
  <div>
    <Query query = {GET_FAVORITE_JOBS}>
      {({ loading, error, data }) => (
        <FavoriteJobList loading = {loading} error = {error} data = {data} />
      )}
    </Query>
  </div>
);

Я видел это: https://www.apollographql.com/docs/react/essentials/queries.html#refetching

Обязательно ли использовать refetch на componentDidMount?

Благодарность!

reactjs graphql apollo react-apollo

09.10.2018 13:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

152

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, у вас есть 2 возможности:

1, Define some random input to your query, and pass it in. like this:

export default () => (
  <div>
    <Query query = {GET_FAVORITE_JOBS} variables = {{ random: New Date().getTime() }}>
      {({ loading, error, data }) => (
        <FavoriteJobList loading = {loading} error = {error} data = {data} />
      )}
    </Query>
  </div>
);

2, Export as a container and acces the result as a props:

import { graphql } from "react-apollo";

const SomeComp = (props) => (
  <div>
    // You can acces the results here as props. 
    // Also You can use props.refetch() as an action or component lifecycles
  </div>
);
export default graphql(GET_FAVORITE_JOBS, {
  name: "getFavJobs",
  options: (props)=> ({
    variables: {
      random: New Date().getTime()
    }
  })
})(SomeComp));

11.10.2018 12:36

Другие вопросы по теме

GoogleOAuth с паспортом, graphql-yoga и prisma

Объясните синтаксис вызова функции mutate на клиенте Apollo

Запрос и изменение формы с помощью Apollo Client GraphQL

Как посмотреть логи отладки graphene-django

Включить связь при запросе узла с использованием оболочки, сгенерированной Prisma

Graphql: используйте GraphQLObjectType для создания типа, расширяющего мутацию

Обнаружен подвыбор в запросе, но в магазине нет ссылки на объект. Состояние ссылки Apollo

Получите максимальное и минимальное значение с помощью запроса GraphQL

Использовать облачный код parse-server для аутентификации facebook

Как выполнить схему Graphql на контроллере Laravel Api?

Повторное получение Apollo при использовании с React

Ответы 1

Другие вопросы по теме

Похожие вопросы