GraphQL

Viele moderne Schnittstellen nutzen GraphQL als Abfragesprache. In der Regel wird dabei eine GraphQL Query oder Mutation per POST an einen GraphQL Endpunkt der API geschickt.

Damit du als Entwickler die GraphQL Queries nicht direkt im Code hinterlegen musst, kannst du diese als *.gql Dateien ablegen. Das hat zudem den Vorteil, dass die meisten Code-Editoren und IDEs eine Syntaxhervorhebung und Autovervollständigung dafür bieten.

Damit TypeScript weiß, dass der Inhalt der Dateien als String geladen werden soll, musst du die Dateiendung registrieren.

Lege dafür im Wurzelverzeichnis deines Projektes eine custom-webpack.js Datei an, und fülle diese mit dem folgenden Inhalt.

// custom-webpack.js
module.exports = (config) => {
    config.module.rules.push({
        test: /\.gql$/i,
        type: "asset/source"
    });
    config.resolve.extensions.push('.gql')
    return config;
};

Der Code fügt als Erstes eine Regel hinzu, welche besagt, dass alle Dateien, welche mit .gql enden, als Text-Asset geladen werden sollen und registriert dann noch zusätzlich die .gql Endung bei den Dateiendungen, welche aufgelöst werden sollen.

Nun kannst du im Code einfach die Queries und Mutations importieren und verwenden.

# query-current-user.gql
query {
    currentUser { id }
}

// Deine Schnittstelle
import queryCurrentUser from "./query-current-user.gql";

// queryCurrentUser = string = Dateiinhalt von ./query-current-user.gql

await SodaSync.http.request("POST", "https://api.tld/graphql", JSON.stringify({
    "operationName": null,
    "variables": null,
    "query": queryCurrentUser,
}), {"Content-Type": "application/json"});