Wie zu zwingen, Apollo-Abfrage-Komponente re-Abfrage ausführen, wenn die übergeordnete Komponente neu gerendert

Ich bin mit Apollo Client <Query> innerhalb einer Komponente, die neu gerendert, wenn sich der Zustand geändert wird innerhalb eines Lebenszyklus-Methode. Ich möchte meine <Query> Komponente führen Sie die Abfrage erneut, weil ich weiß, dass sich Daten geändert haben.
Es scheint, dass die Abfrage-Komponente ist die Verwendung eines Caches, das muss für ungültig erklärt werden, bevor die Abfrage wird erneut ausgeführt.

Ich bin mit einem wonky Problemumgehung, mit der die caches der refetch Rückruf vom render prop in der übergeordneten Komponente, aber es fühlt sich falsch an. Ich werde meinen Ansatz in die Antworten, wenn jemand interessiert ist.

Mein code sieht ungefähr so aus. Ich entfernte loading und error Handhabung von Abfragen sowie einige andere Details für die Kürze.

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

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

    return (
      <Query query={MY_QUERY}>
        {({ data }) => {
          return <ChildComponent gqlData={data} stateData={otherData} />
        }}
      </Query>
    )
  }
}

Wie kann ich Kraft <Query> zu Holen, neue Daten zu übergeben <ChildComponent>?

Obwohl ParentComponent neu gerendert, die als Requisiten oder Statusänderung Query nicht erneut ausführen. ChildComponent bekommt einen aktualisierten stateData Stütze, aber hat eine veraltete gqlData prop. So wie ich das verstehe Apollo query-cache für ungültig erklärt werden müssen, aber ich bin mir nicht sicher.

Bitte beachten Sie, dass übergeben refetch zu ChildComponent ist nicht die Antwort, weil es zeigt nur Informationen GraphQL und nicht weiß, Wann refetch. Ich will nicht vorstellen, Timer oder sonst erschweren ChildComponent um dieses Problem zu lösen - er braucht nicht zu wissen über diese Komplexität oder Daten abrufen betrifft.

  • Hinzugefügt habe ich paar Optionen, benutzte ich immer die erste, die zweite Methode würde nicht funktionieren, wenn Sie nicht möchten, übergeben Sie nichts auf.
InformationsquelleAutor Andrei R | 2018-07-26
  1. 4

    Hatte ich fast eine ähnliche situation, die ich gelöst mit fetchPolicy Attribut:

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

    Aufgabe war die Last einige details vom server durch einen Klick auf ein Listenelement.

    Und wenn ich wollte, um eine Aktion zu zwingen, wieder-Holen Sie die Abfrage (wie das ändern der details), habe ich zunächst zugewiesen refetch zu this.refetch:

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

    Und der spezifischen Aktion, die ich wollte die refetch passieren sollte, rief ich:

    this.refetch();
    • Dies war die einfachste Lösung für mich
    InformationsquelleAutor Saro
  2. 2

    Scheint es mir, dass die Query-Komponente, die nicht unbedingt sein müssen, innerhalb dieses ParentComponent.

    In diesem Fall, würde ich bewegen die Query-Komponente, da würde ich immer noch in der Lage sein, um machen andere Sachen, während ich nicht haben, Ergebnisse in der ChildComponent. Und dann hätte ich Zugriff auf die query.refetch Methode.

    Beachten Sie, dass im Beispiel habe ich den graphql hoc, aber man kann immer noch mit der Abfrage-Komponente aus, um <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);
    • Danke. Dies öffnete meine Augen ein wenig. Grundsätzlich <Query> ist eine schlechte Wahl für fast jeden Anwendungsfall eine andere als die triviale lieben.
    • Ja. Habe ich am Ende nicht mit, dass viel. Diese diese Ihr problem lösen?
    InformationsquelleAutor Pedro Baptista Afonso
  3. 1

    Konnte Sie refetch in übergeordneten Komponente? Wenn der parent-Komponente ein update bekommen, dann kann man beurteilen, ob der Auslöser eine Holen oder nicht.

    Ich habe es getan, ohne mit Query wie folgt: 

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

    So können Sie Ihre trigger abrufen, Wann immer Sie es wollen. Sie können den query-as-a prop in diesem Fall.

    Für Ihren Fall, setzen Sie Ihre Abfrage in ein prop mit export default graphql(addSongQuery)(SongCreate);. Dann rufen Sie in Ihrem lifecyclehooks DidUpdate.

    Anderen Optionen ist die Verwendung refetch auf Abfrage.

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

    Die zweite Methode würde verlangen, dass Sie pass etwas runter, um Ihr Kind, das ist nicht wirklich schlecht.

    • in beiden deiner Beispiele untergeordnete Komponente etwas tut, löst ein rerender. wie in der Frage beschriebenen, untergeordneten Komponente muss nicht wissen, , wenn, die zum auslösen eines rerender (es ist nicht interaktiv). danke, aber das ist nicht wirklich das, was ich bin nach
    • Nein, die erste nicht. Die Eltern der Abfrage, die als requisite, und Sie können re-render verwenden der lifecycle-hooks.
    • ah, ich sehe. nun, Sie haben es vereinfacht, es ist leichter zu Folgen. danke.
    • Super!!! Gerne arbeiten @AndreiR. Lassen Sie mich wissen, wie es sich herausstellt. Wenn Sie arbeitet, könnte Sie Stimmen zu und akzeptieren die Antwort für die anderen Zuschauer? Dank
    InformationsquelleAutor leogoesger
  4. 0

    Wie versprochen, hier ist mein hacky Abhilfe

    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>
    )
  }
}
    InformationsquelleAutor Andrei R
Schreibe einen Kommentar