One of the biggest benefits of GraphQl is that it simplifies the content of the request and response. There are no redundant fields, and the front end can decide what data the back end returns. However, it’s important to note that the decision of the front end depends on what data the back end supports, so GraphQl is more like REST with reduced return values, and the back end interface can define all the functionality at once, rather than having to develop it individually.

Look at the definition of Graphql:

  • GraphQl is a new API standard that provides a more efficient, powerful, and flexible alternative to REST.
  • Developed and open source by Facebook, it is now maintained by a large community of companies and individuals from around the world.
  • GraphQl is essentially an API-based query language. Today, most applications need to retrieve data from a server, which may be stored in a database. The API’s job is to provide an interface to store the data that matches the requirements of the application.
  • It is database-independent and can be used effectively in any environment that uses the API. We can think of GraphQl as a layer of encapsulation on top of the API to better and more flexibly adapt to the changing needs of the business.

In a nutshell, GraphQl is a language designed to reduce the complexity of the client’s API calls. Give the front end more room to manipulate data calls.

The back-end API is nothing more than CRUD, providing data services. However, there are often inconsistent data models on the front and back ends, or outdated API documents, and versioning annoyances. GraphQl uses a front-end consistent Schema to standardize both the front-end and back-end APIs. Standardize the ability of APIs to provide data services, and get and write data that is validated by the data model, similar to TypeScript’s mandatory typing, to avoid catastrophic errors caused by data types.

Without the code development platform, the building block library adopted GraphQl as the middleware for the data transmission of the front and rear end, and used Apollo GraphQl framework. The back end adopted NodeJS and Apollo Server, and the front end adopted NextJS and Apollo Client.

GraphQl includes a complete cache handling mechanism, with different caching methods, such as local cache first, or network first, depending on the policy. Create a client API port,

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

const client = new ApolloClient({
    uri: "https://admin.jimuku.com/graphql",
    cache: new InMemoryCache(),
});

export default client;

Query Query Query Query Query

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

Playground panel

The result of the Query is as follows:

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

The fields returned in Data can be specified in Query, so that the request is more granular, down to each field.

The React component code:

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),
      },
   };
}

The actual use of the page:

<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 fili-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.25 C-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>

Here, just a glimpse of GraphQl. If you’re interested, you can read the Apollo GraphQl documentation, but it’s only in English and it’s very detailed.

Code-free development is a popular trend in recent years, and it is also the inevitable result of the development of software application development. Whether it’s low code or no code, the goal is to minimize repetitive development actions. Creating configurable components to match components to complete the design of the page is the name of the building block library and the inspiration for building blocks.

In the building block library, we don’t need to write code, but directly use the components to form the page and complete the development of the web page. It is very important that the application without code collocation from the building block library can be directly released online. The management background, front-end page, internationalization of multi-language, functional modules, data backup, recovery, import and export, etc., are all integrated in the complete system.

Direct release online, easy and fast development, this is the building block library through the latest front and back end technology integration, reduce the cost of early application development, help entrepreneurial teams to quickly launch projects.

Finally, interested in learning about the building blocks library, no code rapid development, welcome to try.