Как заставить компонент Apollo 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();

Мне кажется, что компонент 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);

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

Я сделал это без использования 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>

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

В дополнение к уже принятому ответу выше есть 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()

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

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