Beispiel für die Implementierung der Graphql-Schnittstelle in Vue

Hinweis: In diesem Artikel geht es um die grundlegenden Wissenspunkte zu Graphql im nestjs+graphql+serverless-Trainingslager, an dem ich derzeit arbeite. Er ist möglicherweise nicht mit dem vorherigen und dem nächsten verbunden. Die im Artikel erwähnte Graphql-Autorisierung wird auch im nächsten Abschnitt vorgestellt.

1. Ändern Sie das ursprüngliche Express zurück in ein Graphql-Projekt

Der in diesem Kapitel verwendete Code ist der Code, den Express an Graphql zurückgibt. Bevor Sie ihn verwenden, müssen Sie eine grundlegende Konfiguration des Codes vornehmen, z. B. die Behandlung domänenübergreifender Probleme (Graphql sendet im Wesentlichen eine HTTP-Anforderung. Da dies der Fall ist, gibt es im Vue-Projekt natürlich domänenübergreifende Probleme, die zuerst behandelt werden müssen).

1. Installieren Sie domänenübergreifende Pakete und konfigurieren Sie die Middleware

npm installiere cors

const cors = erfordern('cors');
// Domänenübergreifende Anfragen verarbeiten app.use(cors());

2. Konfigurieren Sie die Middleware, um den Anforderungstext abzurufen

// Anfrage verarbeiten app.use(express.json()); //express.json=bodyParser.json
app.use(express.urlencoded({ erweitert: true }));

2. Graphql in Vue integrieren

1. Adresse des Referenzdokuments

2. Installieren Sie Abhängigkeitspakete

npm install --save vue-apollo graphql apollo-boost graphql-tag

3. Führen Sie das Apollo-Boost-Modul in src/main.js ein und instanziieren Sie ApolloClient

ApolloClient aus „apollo-boost“ importieren
...
const apolloClient = neuer ApolloClient({ 
  // Sie müssen hier einen absoluten Pfad verwenden, es wird kein Unterschied zwischen den Entwicklungsumgebungen gemacht URI: 'http://localhost:8000/graphql',
});
...

4. Konfigurieren Sie das Vue-Apollo-Plugin in src/main.js

Importieren Sie VueApollo von „vue-apollo“. 
Vue.use(VueApollo);

5. Erstellen Sie einen Apollo-Anbieter und hängen Sie ihn in die Anwendung ein

Vue von „vue“ importieren
App aus „./App.vue“ importieren
ApolloClient aus „apollo-boost“ importieren
Importieren Sie VueApollo von „vue-apollo“. 
Vue.use(VueApollo);

Vue.config.productionTip = falsch

const apolloClient = neuer ApolloClient({ 
  // Sie müssen hier den absoluten Pfad-URI verwenden: 'http://localhost:8000/graphql',
});
const apolloProvider = neuer VueApollo({
  Standardclient: apolloClient,
})

neuer Vue({
  rendern: h => h(App),
  // In die Anwendung apolloProvider einbinden,
}).$mount('#app')

3. Daten abfragen

1. Verwenden Sie die Apollo-Seite, um Daten abzufragen

Gemäß der offiziellen Einführung müssen Sie ApolloProvider nur in Vue mounten, und in der Vue-Hook-Funktion wird ein zusätzliches Attribut Apollo vorhanden sein.

<Vorlage>
  <div Klasse="Über">
    {{accountList}}
  </div>
</Vorlage>

importiere gql aus „Graphql-Tag“;
Standard exportieren {
  Name: 'Über',
  Apollo:
    Kontoliste: gql`query {
      Kontoliste {
        Ausweis
        Benutzername
        Passwort
      }
    }`
  },
} 

2. Verwenden Sie Funktionen zum Aufrufen von Apollo

importiere gql aus „Graphql-Tag“;
Standard exportieren {
  Apollo:
    Kontoliste () {
      zurückkehren {
        Abfrage: gql`query {
          Kontoliste{ 
            Ausweis
            Benutzername
            Passwort
            erstellt am
          }
        }`,
      }
    },
  }
}

3. Klicken Sie auf die Schaltfläche, um Daten abzurufen

importiere gql aus „Graphql-Tag“;
// Definieren Sie das Abfrageschema
const accountListGql = gql`{
  Kontoliste {
    Ausweis
    Benutzername
    Passwort
  }
}`;

Standard exportieren {
  Daten() {
    zurückkehren {
      Tabellenliste: [],
    }
  },
  Methoden: {
    getTableData() {
      dies.$apollo.addSmartQuery('accountList', {
        Abfrage: accountListGql,
        Ergebnis(Antwort) {
          console.log(Antwort);
          const {accountList} = Antwort.Daten;
          this.tableList = Kontoliste;
        },
        Fehler(Fehler) {
          console.log('Anforderung fehlgeschlagen', Fehler);
        }
      })
    }
  }
}

Die obige Methode kann auch durch die folgende Schreibmethode ersetzt werden. Wenn das angeforderte Geschäft nicht kompliziert ist, können Sie es so schreiben. Wenn es kompliziert ist, extrahieren Sie ein Schema separat gemäß der obigen Methode

...
getTableData() {
  dies.$apollo.addSmartQuery('accountList', {
    Abfrage: gql`{
      Kontoliste{
        Ausweis
        Benutzername
        Passwort
      }
    }`,
    Ergebnis(Antwort) {
      console.log(Antwort);
      const {accountList} = Antwort.Daten;
      this.tableList = Kontoliste;
    },
    Fehler(Fehler) {
      console.log('Anforderung fehlgeschlagen', Fehler);
    }
  })
}
...

4. Daten durch Übergeben von Parametern anfordern

handleClick (Zeilendaten) {
  dies.$apollo.addSmartQuery('Konto', {
    Abfrage: gql`
      Abfrage($id: ID!) {
        Konto(ID: $id) {
          Ausweis
          Benutzername
          Passwort
        }
      }
    `,
    Variablen: {
      ID: rowData.id,
    },
    Ergebnis (Antwort) {
      console.log('Einzelne Daten abfragen', response.data);
    }
  })
}

4. Verbesserungen der Datenabfragemethode

1. Mit der obigen Methode können Daten abgefragt werden, Sie können jedoch nicht wiederholt auf die Schaltfläche klicken, da sonst ein Fehler auftritt

2. Verbesserte Version der Abfragedaten, verwenden Sie direkt die Abfragemethode zum Abfragen

getTableData () {
  dies.$apollo.query({
    Abfrage: gql`{
      Kontoliste{
        Ausweis
        Benutzername
        Passwort
      }
    }`,
  }).dann(Antwort => {
    console.log(Antwort);
    const { Kontoliste } = Antwort.Daten;
    diese.Tabellenliste =Kontoliste;
  })
}

5. Daten durch Mutation hinzufügen

Den spezifischen Implementierungscode finden Sie weiter unten.

beim Senden () {
  dies.$refs.form.validate(async (gültig) => {
    if (gültig) {
      Konsole.log(dieses.Formular);
      const Ergebnis = warte darauf.$apollo.mutate({
        Mutation: gql`
          Mutation addAccount($Benutzername: String!, $Passwort: String!) {
            addAccount(Benutzername:$Benutzername,Passwort: $Passwort)
          }
        `,
        Variablen: {
          Benutzername: this.form.username,
          Passwort: this.form.password,
        }
      });
      console.log('Ergebnis aktualisieren', Ergebnis);
    } anders {
      // this.$message.error('Bitte Daten hinzufügen')
      gibt false zurück;
    }
  })
}

6. Graphql-Anfragen optimieren

1. Wenn Sie die Browserkonsole öffnen und auf die Graphql-Schnittstelle klicken, finden Sie die folgenden drei Parameter

2. Wenn die Daten gleich bleiben oder sich der Wert der Variable nicht ändert, wird keine Anfrage an das Backend gestellt.

3. Was ist operationName? Ich glaube, viele Leute werden Zweifel haben. Nachdem Sie die folgenden beiden Bilder gesehen haben, glaube ich, dass jeder nicht verwirrt sein wird.

Diesen Operationsnamen verwenden Sie, wenn Sie eine Abfrage oder Mutation verwenden. Sie können ihm einen beliebigen Namen geben, aber es wird im Allgemeinen empfohlen, ihn mit dem Operationsnamen der Backend-API konsistent zu halten.
Wozu dient dieser Operationsname? Wir stellen fest, dass die von Graphql gesendeten Anfragen alle dieselbe URL-Adresse haben. Wenn wir die herkömmliche Restful API verwenden, müssen wir die Adresse der aktuellen Anfrage abrufen, wenn wir eine Login-Authentifizierung durchführen oder die URL abrufen. Für Graphql ähnelt dieser Operationsname dieser Funktion, die unterscheidet, welche API anfordert.

7. Code optimieren

Bei herkömmlichen Restful-API-Anfragen erstellen wir lieber einen Dienstordner im Projekt, um alle API-Anfragen zur einfacheren Verwaltung zusammenzustellen, und schreiben selten alle Anfragen auf die Vue-Seite. Dies kann auch in GraphQL erfolgen, jedoch auf andere Weise.

1. Erstellen Sie im Projekt einen GraphQL-Ordner, der Schnittstellenanforderungen ähnlich der Restful API enthält

2. Erstellen Sie eine Abfrageschnittstelle in src/graphql/accountList.graphql

Abfrage AccountList {
  Kontoliste {
    Ausweis
    Benutzername
    Passwort
  }
}

3. Einführung in Vue

importiere AccountList aus „./../graphql/accountList.graphql“;
...
Methoden: {
  asynchron initTableData () {
    diese.tableList = [];
    dies.laden = wahr;
    const { Daten, laden } = warte auf dies.$apollo.query({
      Abfrage: AccountList,
    });
    console.log(data, 'Anforderung gibt Daten zurück');
    this.loading = wird geladen;
    diese.Tabellenliste = Daten.Kontoliste;
  },
}
...

4. Wenn nichts Unerwartetes passiert, wird direkt ein Fehler gemeldet, da Vue GraphQL-Dateien nicht direkt erkennen kann. Wir müssen Webpack verwenden, um den entsprechenden Loader zum Laden von GraphQL zu konfigurieren

5. Erstellen Sie einen vue.config.js-Konfigurationslader im Stammverzeichnis des Projekts

modul.exporte = {
  configureWebpack: (config) => {
    config.module.rules.push({
      Test: /\.(graphql|gql)$/,
      ausschließen: /node_modules/,
      Lader: „graphql-tag/loader“
    })
  },
};

6. Verarbeitungsdaten werden nicht aktualisiert

Jedes Mal, wenn wir Daten hinzufügen, löschen oder ändern, erreicht Graphql das Backend nicht, obwohl wir initTableData aufrufen. Dies liegt am Cache-Problem. Wir müssen die rot eingekreisten Felder bei der Abfrage hinzufügen, damit wir die Daten bei jedem Aufruf aktualisieren können.

fetchPolicy: "kein Cache", 

7. Das Gesamtwirkungsdiagramm dieses Kapitels

8. Code für diesen Abschnitt Code-Download-Adresse

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel der Docking-Graphql-Schnittstelle in Vue. Weitere relevante Inhalte zur Docking-Graphql-Schnittstelle von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!