Řada API – Část 3:GraphQL a odesílání dotazů pomocí funkce fetch()

Úvod

V tomto tutoriálu se naučíte, jak dotazovat data z GraphQL API. Během tohoto procesu se seznámíte s některými běžnými nástroji používanými pro práci s GraphQL API, syntaxí a strukturou GraphQL a obdržíte repozitář VanillaJS GraphQL, který si můžete prostudovat a spustit na svém místním systému.

Pokud jste nestihli předchozí díly, najdete je zde:
Část 1 - Úvod do rozhraní API
Část 2 – REST API, fetch() a AXIOS

Předpoklady

Určitá znalost HTML, Git a JavaScript.

Co je GraphQL

Stejně jako rozhraní API RESTful odpovídají architektonickému stylu REST, rozhraní API GraphQL se řídí přísnou architekturou GraphQL. GraphQL je dotazovací jazyk pro API organizovaná s touto architekturou GraphQL. Ale na rozdíl od RESTful API má GraphQL jeden koncový bod URL, což nabízí výhodu oproti práci s REST API, která vyžadují různé koncové body URL pro různá data. Navíc GraphQL API vrací pouze data, která potřebujete, na rozdíl od REST API, která často dodávají všechna data spojená s objektem. Pokud například chcete načíst jméno uživatele, rozhraní REST API vrátí objekt uživatele spolu se všemi jeho vlastnostmi. Toto je známé jako overfetching a může zpomalit vaše aplikace. S GraphQL, jak uvidíte, můžete vrátit pouze uživatelské jméno.

Jako vývojář frontendu budete pracovat s rozhraním API, které je již vytvořeno, ale je užitečné pochopit, jak jsou vytvořeny. Architektura schématu GraphQL je definována řadou schémat založených na typu, jako je níže uvedený příklad z webu GraphQL Foundation:

type Query {
  hero: Character
}

type Character {
  name: String
  friends: [Character]
  homeWorld: Planet
  species: Species
}

type Planet {
  name: String
  climate: String
}

type Species {
  name: String
  lifespan: Int
  origin: Planet
}

Ve výše uvedeném příkladu existuje několik typů:Dotaz, Postava, Planeta a Druh. Některé typy jsou zabudovány do dotazovacího jazyka. Příkladem jsou typy Query a Mutation, kterým se hlouběji ponoříme později. Vlastní typy postav, planet a druhů se označují jako typy objektů. Každý typ bude mít jednu nebo více vlastností, které se často označují jako pole. Z výše uvedeného příkladu má typ Query pole hrdina, které vrací pole typu objektu Character. V rámci API je polím přiřazen typ, jako je vestavěný řetězec, Int, Float, Boolean nebo ID, nebo polím jsou přiřazeny objekty typu, jako je ve výše uvedeném příkladu Character, Planet nebo Species. Podobně jako syntaxe JavaScriptu i typy objektů uzavřené v závorkách vracejí pole daného typu objektu.

Dotazy a mutace

Zatímco REST API má několik metod, jako je POST, GET, PATCH, PUT a DELETE, GraphQL má pouze dvě metody:Query a Mutation.

Dotazy jsou jako metoda REST API GET. Vracejí data uložená rozhraním API.

Mutace mění data a zahrnují metody REST API POST, PUT, PATCH a DELETE.

Začínáme s dotazem GraphQL API

Abychom nezabředli do nastavování vývojového prostředí, abychom mohli začít, nejprve se seznámíme s používáním rozhraní GraphQL API pomocí průzkumníka GraphiQL společnosti OneGraph na adrese https://www.onegraph.com/graphiql
Domovská stránka bude vypadat takto:

OneGraph je společnost, která integruje všechna nejběžněji používaná API v podnikání do jediného GraphQL API, takže vývojáři mohou dotazovat Twitter, Salesforce, Slack a UPS v jediném dotazu. GraphiQL není ve vlastnictví OneGraph. Je to nástroj, který můžete používat samostatně.

Chcete-li se dozvědět více o GraphiQL, navštivte https://github.com/graphql/graphiql

Ve sloupci zcela vlevo vidíme všechna rozhraní API, která OneGraph integroval do své nabídky. Středové sloupce jsou místo, kam zapíšeme náš dotaz. Sloupec zcela vpravo je místo, kde se zobrazí náš výstup dotazu.

V níže uvedeném příkladu se dotážeme na DEV blogging API, abychom získali nějaké informace o článku od uživatele nbhankes :

Průzkumník GraphiQL nám ukazuje strukturu schématu GraphQL API rozhraní DEV API a umožňuje nám vybrat data, která bychom chtěli z API načíst. Když provedeme tento výběr, průzkumník vytvoří dotaz, který vidíme sestaven v prostředním sloupci. Jakmile je náš dotaz vytvořen, spustíme dotaz stisknutím tlačítka přehrávání na liště. Dotaz je poté odeslán do DEV API a výsledky se zobrazí vpravo.

Níže je skutečný kód, který si můžete prostudovat. Všimněte si termínů hrany a uzel v části označené GraphQL Query. uzly definují objekty a hrany definují vztahy mezi objekty a jsou volitelné (kromě klienta Relay GraphQL). Jejich přidání do dotazu může být užitečné při práci se složitými schématy rozhraní API. Pro tento úvod je důležité si je uvědomit. Pokud se chcete ponořit hlouběji do hran a uzlů, navštivte https://www.apollographql.com/blog/explaining-graphql-connections-c48b7c3d6976/

Pojďme se ponořit do kódu níže:

//GraphQL Query

query MyQuery {
  devTo {
    articles(username: "nbhankes") {
      edges {
        node {
          title
        }
      }
    }
  }
}


//API Response

{
  "data": {
    "devTo": {
      "articles": {
        "edges": [
          {
            "node": {
              "title": "The API Series - Part 2: The REST API, fetch(), and AXIOS"
            }
          },
          {
            "node": {
              "title": "The API Series - Part 1: An Intro to APIs"
            }
          },
          {
            "node": {
              "title": "Classless CSS Isn't Trashy"
            }
          },
          {
            "node": {
              "title": "Upgrade Your CSS: The Syntax.fm Typography Sizing Strategy"
            }
          }
        ]
      }
    }
  }
}




//GraphQL Query without edges or node

query MyQuery {
  devTo {
    articles(username: "nbhankes") {
      title
    }
  }
}


//API Response without edges or node

{
  "data": {
    "devTo": {
      "articles": [
          {
              "title": "The API Series - Part 2: The REST API, fetch(), and AXIOS"
          },
          {
              "title": "The API Series - Part 1: An Intro to APIs"
          },
          {
              "title": "Classless CSS Isn't Trashy"
          },
          {
              "title": "Upgrade Your CSS: The Syntax.fm Typography Sizing Strategy"
          }
        ]
      }
    }
  }

Ve výše uvedeném kódu můžete vidět, že tvar dotazu definuje tvar odpovědi API. Odpověď má tvar vnořeného objektu JavaScript a lze s ní zacházet podobně.

Použití GraphQL ve vašem projektu:Demo

I když je průzkumník GraphiQL extrémně užitečný, nemůžete dotaz GraphQL jen přidat do kódu a očekávat, že bude fungovat. Níže naleznete odkaz na úložiště GitHub, které vytváří dotaz GraphQL pomocí prostého JavaScriptu a rozhraní Fetch() API. Toto ukázkové úložiště obsahuje kód pro webovou stránku, která se dotazuje na SpaceX GraphQL API a vykresluje data odezvy do prohlížeče. Demo vytvořilo toto:

A skvělá věc na práci s API je, že pokud se změní CEO SpaceX, naše webové stránky automaticky zohlední změny, jakmile bude API aktualizováno.

Navštivte živou ukázku

Odkaz na Repo:https://github.com/nbhankes/vanillaJS-GraphQL-demo

Prostudujte si komentáře a kód v úložišti, postupujte podle pokynů v souboru README.md, abyste projekt spustili ve vašem místním prostředí. Přizpůsobte si dotaz a literál šablony pro praxi.

Závěr

V tomto tutoriálu jste se naučili, jak dotazovat data z GraphQL API. Byli jste vystaveni některým běžným nástrojům používaným pro práci s GraphQL API, syntaxí a strukturou GraphQL a obdrželi jste repozitář VanillaJS GraphQL ke studiu a spuštění na vašem místním systému.