「积木库」GraphQL技术搭建的无代码开发平台

2021-07-13 12:58:53 阅读：210 来源： 互联网

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: "https://admin.jimuku.com/graphql",
    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),
      },
   };
}

页面中实际的使用:

<div className={styles.grid}>
  {countries.map((country) => (
    <div key={country.code} className={styles.card}>
      <h3><a href="#country-name" aria-hidden="true" class="aal_anchor" id="country-name"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>{country.name}</h3>
      <p>
        {country.code} - {country.emoji}
      </p>
    </div>
  ))}
</div>

这里，只是大致了解下GraphQL，如果感兴趣的话，可以阅读Apollo GraphQL文档，不过只有英文版，非常的详细。

无代码开发是最近两年比较火的风向，也是软件应用开发领域发展的必然结果。无论是低代码还是无代码，都是尽可能的减少重复的开发动作。创建可配置的组件，以组件搭配的方式，完成页面的设计，这就是积木库的名称积木搭建的灵感来源。

在积木库中，不用编写代码，直接使用组件搭配，形成页面，完成网页的开发。很重要的一点是，由积木库无代码搭配的应用，是直接可以上线发布的，管理后台，前端页面，国际化多语言，功能模块，数据备份恢复导入导出等等等等，都是一体化的在完整的系统中。

直接发布上线，轻松快速的开发，这就是积木库通过最新的前后端技术的整合，减少应用早期开发成本，帮助创业团队快速项目上线。

最后，有兴趣了解下积木库，无代码快速开发，欢迎尝试。

标签：积木,代码,API,GraphQL,开发,data,搭建
来源： https://blog.csdn.net/jimuku/article/details/118697376

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

「积木库」GraphQL技术搭建的无代码开发平台