Как заставить компонент Apollo Query повторно запускать запрос при повторном рендеринге родительского компонента

Не могли бы вы выполнить повторную загрузку родительского компонента? Как только родительский компонент получит обновление, вы можете оценить, запускать ли выборку или нет.

Я сделал это без использования Query, как показано ниже:

class ParentComp extends React.Component {

    lifeCycleHook(e) { //here
        // call your query here
        this.props.someQuery()
    }

    render() {
        return (
            <div>
                <Child Comp data = {this.props.data.key}> //child would only need to render data
            </div>
        );
    }
}

export default graphql(someQuery)(SongCreate);

Таким образом, вы можете запустить загрузку в любое время, когда захотите. В этом случае вы можете получить запрос как prop.

В вашем случае вы бы поместили свой запрос в опору, используя export default graphql(addSongQuery)(SongCreate);. Затем назовите его в перехватчиках жизненного цикла DidUpdate.

Другой вариант - использовать refetch в запросе.

<Query
    query = {GET_DOG_PHOTO}
    variables = {{ breed }}
    skip = {!breed}
  >
    {({ loading, error, data, refetch }) => {
      if (loading) return null;
      if (error) return `Error!: ${error}`;

      return (
        <div>
          <img
            src = {data.dog.displayImage}
            style = {{ height: 100, width: 100 }}
          />
          <button onClick = {() => refetch()}>Refetch!</button>
        </div>
      );
    }}
  </Query>

Второй метод потребует от вас передать что-то своему ребенку, что на самом деле не так уж и плохо.

Мне кажется, что компонент Query не обязательно должен находиться внутри этого ParentComponent.

В этом случае я бы переместил компонент Query вверх, так как я все еще мог бы отображать другие вещи, пока у меня нет результатов в ChildComponent. И тогда у меня был бы доступ к методу query.refetch.

Обратите внимание, что в примере я добавил graphql hoc, но вы все равно можете использовать компонент Query для <ParentComponent />.

class ParentComponent extends React.Component {
    componentDidUpdate(prevProps) {
        if (this.props.refetchId !== prevProps.refetchId) {
            const otherData = this.processData() // do something

            //   won't need this anymore, since refetch will cause the Parent component to rerender)
            //   this.setState({otherData}) // this forces component to reload 

            this.props.myQuery.refetch(); // >>> Refetch here!
        }
    }

    render() {
        const {
            otherData
        } = this.state;

        return <ChildComponent gqlData = {this.props.myQuery} stateData = {otherData} />;
    }
}

export graphql(MY_QUERY, {
    name: 'myQuery'
})(ParentComponent);

Как и обещал, вот мой обходной путь

class ParentComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.refetchId !== prevProps.refetchId) {
      const otherData = this.processData() // do something
      this.setState({otherData})
      if (this.refetch) {
        this.refetch()
      }
    }
  }

  render() {
    const { otherData } = this.state
    const setRefetch = refetch => {this.refetch = refetch}
    return (
      <Query query = {MY_QUERY}>
        {({ data, refetch }) => {
          setRefetch(refetch)
          return <ChildComponent gqlData = {data} stateData = {otherData} />
        }}
      </Query>
    )
  }
}

У меня была почти аналогичная ситуация, которую я решил с атрибутом fetchPolicy:

<Query fetchPolicy = "no-cache" ...

Задача заключалась в том, чтобы загрузить некоторые детали с сервера, щелкнув элемент списка.

И если я хотел добавить действие для принудительной повторной выборки запроса (например, изменение деталей), я сначала назначил refetch для this.refetch:

<Query fetchPolicy = "no-cache" query = {GET_ACCOUNT_DETAILS} variables=... }}>
  {({ data: { account }, loading, refetch }) => {
  this.refetch = refetch;
...

И в конкретном действии, которое я хотел выполнить, я вызвал:

this.refetch();

В дополнение к уже принятому ответу выше есть 2 способа добиться этого.

Если все, что вам нужно, это получать данные с сервера graphql для создания списка каждый раз, когда компонент монтируется, у вас есть следующие параметры:

1. Используйте опцию fetchPolicy = "no-cache"

export default defineComponent({
  setup() {
    const { result, loading, error } = useMyQuery(
      () => {
        return { date: new Date() }
      },
      {
        pollInterval: 15 * 60 * 1000, // refresh data every 15 min
        fetchPolicy: 'no-cache',
      }
    )

2. Используйте метод refetch(), сохраняя кеш на месте:

export default defineComponent({
  setup() {
    const { result, loading, error}, refetch } = useMyQuery(
      () => {
        return { date: new Date() }
      },
      {
        pollInterval: 15 * 60 * 1000, // refresh data every 15 min
      }
    )

    if (!loading.value) void refetch()