「積木庫」GraphQL技術搭建的無程式碼開發平臺

GraphQL 帶來的最大好處是精簡請求響應內容，不會出現冗餘欄位，前端可以決定後端返回什麼資料。但要注意的是，前端的決定權取決於後端支援什麼資料，因此 GraphQL 更像是精簡了返回值的 REST，而後端介面也可以一次性定義完所有功能，而不需要逐個開發。

看看GraphQL的定義:

• GraphQL是一種新的API標準，它提供了一種比REST更有效、更強大和更靈活的替代方案。
• 它是由Facebook開發並開源的，現在由來自世界各地的公司和個人組成的大型社群維護。
• GraphQL本質上是一種基於api的查詢語言，現在大多數應用程式都需要從伺服器中獲取資料，這些資料儲存可能儲存在資料庫中，API的職責是提供與應用程式需求相匹配的儲存資料的介面。
• 它是資料庫無關的，而且可以在使用API的任何環境中有效使用，我們可以理解為GraphQL是基於API之上的一層封裝，目的是為了更好，更靈活的適用於業務的需求變化。

簡單來說， GraphQL 是一門為了減少客戶端呼叫 API 複雜度的語言。讓前端對資料呼叫有更多的操作空間。

後端 API 無非是 CRUD，提供資料服務而已。然而常有前後端的資料模型不一致，或者 API 文件過期，以及版本管理的煩惱。 GraphQL 使用前後端一致的 Schema，既規範了前端也規範了後端 API。使得 API 提供資料服務的能力被標準化，獲取及寫入資料都需要經過資料模型的檢驗，這類似於TypeScript的強制型別，避免因為資料型別引起的災難性錯誤。

無程式碼開發平臺，積木庫就採用了GraphQL作為前後端資料傳遞的中介軟體，使用Apollo GraphQL框架，後端採用NodeJs和Apollo Server，前端採用 NextJs和Apollo Client。

GraphQL包含了完備的快取處理機制，根據策略採用不同的快取方式，如本地快取優先，或網路優先等。建立一個客戶端API埠，

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "",
    cache: new InMemoryCache(),
});

export default client;

Query查詢語句:

query start($host: String) {
  start(host: $host) {
    code
    success
    message
    data {
      tourists
      template
    }
  }
}

Playground皮膚

根據Query查詢返回的結果:

{
  "data": {
    "start": {
      "code": 200,
      "success": true,
      "message": "success",
      "data": {
        "tourists": false,
        "template": "official"
      }
    }
  }
}

Data中返回的欄位，可以在Query中具體指定，如此一來，請求的顆粒更加細緻，細到每一個欄位。

在 React 元件的程式碼：

export async function getStaticProps() {
    const { data } = await client.query({
      query: gql`
        query Countries {
          countries {
            code
            name
            emoji
          }
        }
      `,
    });

    return {
      props: {
        countries: data.countries.slice(0, 4),
      },
   };
}

頁面中實際的使用:

  {countries.map((country) => (
    

      

{country.name}
      

        {country.code} - {country.emoji}
      
    
  ))}

這裡，只是大致瞭解下GraphQL，如果感興趣的話，可以閱讀Apollo GraphQL文件，不過只有英文版，非常的詳細。

無程式碼開發是最近兩年比較火的風向，也是軟體應用開發領域發展的必然結果。無論是低程式碼還是無程式碼，都是儘可能的減少重複的開發動作。建立可配置的元件，以元件搭配的方式，完成頁面的設計，這就是積木庫的名稱積木搭建的靈感來源。

在積木庫中，不用編寫程式碼，直接使用元件搭配，形成頁面，完成網頁的開發。很重要的一點是，由積木庫無程式碼搭配的應用，是直接可以上線釋出的，管理後臺，前端頁面，國際化多語言，功能模組，資料備份恢復匯入匯出等等等等，都是一體化的在完整的系統中。

直接釋出上線，輕鬆快速的開發，這就是積木庫透過最新的前後端技術的整合，減少應用早期開發成本，幫助創業團隊快速專案上線。

最後，有興趣瞭解下積木庫，無程式碼快速開發，歡迎嘗試。