One of the biggest benefits of GraphQL is that the response to the request is streamlined, there are no redundant fields, and the front end can decide what data the back end returns. Note, however, that the front end is determined by what data is supported by the back end, so GraphQL is more like REST with reduced return values, and the back end interface can define all the functionality at once, rather than developing 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.
  • It was developed by Facebook and opened source, and is now maintained by a large community of companies and individuals from around the world.
  • GraphQL is essentially an API-based query language. Most applications today need to get data from a server, which may be stored in a database, and the API’s job is to provide an interface to store the data that matches the application’s needs.
  • Since it is database-independent and can be used effectively in any environment where the API is used, we can understand GraphQL as a layer of encapsulation on top of the API in order to better and more flexibly adapt to changing business requirements.

In short, GraphQL is a language designed to reduce the complexity of client-side invocation apis. Give the front end more room to manipulate data calls.

The backend API is nothing more than CRUD, providing data services. However, there are often data model inconsistencies on the front and back ends, or API documentation is out of date, and versioning annoyances. GraphQL uses a consistent Schema on both the front end and back end, which prescribes both the front-end and back-end apis. Standardizing the ability of the API to provide data services, getting and writing data to a data model, similar to TypeScript’s mandatory typing, prevents catastrophic errors due to data types.

Without code development platform, building block library adopts GraphQL as the middleware of front and back end data transfer, Apollo GraphQL framework, NodeJs and Apollo Server in the back end, NextJs and Apollo Client in the front end.

GraphQL includes a complete caching mechanism, which uses different caching methods according to the policy, such as local cache first, or network first, etc. 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;

Copy the code

Query:

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

Playground panel

Based on the results of the Query Query:

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

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

Code in the React component:

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

Actual use in 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 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 4H9c -.98 0-2 1.22-2 2.S3 9 4 9zm9-3h-1v1H1C1 0 2 1.22 2 2.S13.98 12 13 12H9c-.98 0-2-1.22-2-2.50 -.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 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>Copy the code

This is just a general overview of GraphQL. If you are interested, you can read the Apollo GraphQL documentation, but it is only in English and very detailed.

No code development is the trend of the recent two years, but also the inevitable result of the development of software application development field. Whether it’s low code or no code, the goal is to minimize repetitive development actions. Creating configurable components to complete the design of the page in a way that the components are paired together is the inspiration for building blocks.

In building blocks library, do not write code, directly use components to match, form pages, complete the development of web pages. It is very important to point out that the application with no code from building blocks library can be directly published online. Management background, front page, internationalization of multi-languages, functional modules, data backup and recovery import and export, etc., are all integrated in the complete system.

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

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