brief introduction
Definition
A Data Query Language for API Calls
Core idea
The traditional api call usually obtains a complete object assembled by the back end, but the front end may only need to use some fields, and most of the data query and transmission work is wasted. GraphQL provides a brand-new data query method, which can only obtain the required data, making api calls more flexible, efficient and low-cost.
Characteristics
- Get whatever data you need.
- Support query of relational data
- The API does not need to define various routes, and is completely data-driven
- There is no need to manage API versions, and one version continues to evolve.
- Support most mainstream development languages and platforms
- Powerful supporting development tools
Use method
Let’s build oneSpaceXTo intuitively learn the basic usage of graphQLOfficial apisGet.
Server side
Node+express is adopted for the server. Create a new node project and install the following dependencies:
$ npm i graphql express-graphql express axios
Create entry fileserver.js
, which creates express services. With graphQL, we only need to set up a route, and all requests are handled by this graphQL’s request handler:
const express = require('express');
const graphqlHTTP = require('express-graphql');
const schema = require('./schema');
const app = express();
app.use('/graphql', graphqlHTTP({
schema,
graphiql: true
}));
const PORT = process.env.PORT || 5000;
app.listen(PORT,()=>console.log(`Server started on port ${PORT}`));
GraphqlHTTP is the http service of grapql, which is used to process query requests of grapql. it receives an options parameter, where schema is anGraphQLSchema
As an example, let’s define that graphQL can be directly debugged in the browser when graphql is set to true. For more usage of express-graphql, please refer toGithub express-graphql.
schema
Next, we define schema, which means’ schema’, which defines the structure of the data model, the types of fields, and the relationships between models, and is the core of graphQL.
Newschema.js
File, first define two data models: LaunchType and RocketType. Note that the data type of the field needs to be defined by GraphQL, and the basic data type in js cannot be used.
const { GraphQLObjectType, GraphQLInt, GraphQLString, GraphQLBoolean, GraphQLList, GraphQLSchema } = require('graphql');
const LaunchType = new GraphQLObjectType({
name: 'Launch',
fields: () => ({
flight_number: { type: GraphQLInt },
mission_name: { type: GraphQLString },
launch_date_local: { type: GraphQLString },
launch_success: { type: GraphQLBoolean },
rocket: { type: RocketType },
})
});
const LaunchType = new GraphQLObjectType({
name: 'Rocket',
fields: () => ({
rocket_id: { type: GraphQLString },
rocket_name: { type: GraphQLString },
rocket_type: { type: GraphQLString }
})
});
After having the data model, we need to obtain the data from the database or the third party API, and here we obtain the data from spacex’s official API. We need to define a root query as the entry for all queries, to process and return data, please refer toGraphQL Root fields & resolvers.
Inschema.js
Add code to:
const axios = require('axios');
...
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
launches: {
type: new GraphQLList(LaunchType),
resolve(parent, args) {
return axios.get('https://api.spacexdata.com/v3/launches').then(res => res.data);
}
}
}
});
module.exports = new GraphQLSchema({
query: RootQuery
});
Query list
To complete this step, the server-side api is basically set up! Let’s look at the effect and enter it in the browser.http://localhost:5000/graphqlGraphiql will be opened (recommended for production environment):
We can only query allflight_number
:
Or more attributes:
Is it very simple and amazing?
Single query
We can also query a single piece of information by passing in parameters:
const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
...
launch: {
type: LaunchType,
args: {
flight_number: { type: GraphQLInt }
},
resolve(parent, args) {
return axios.get(`https://api.spacexdata.com/v3/launches/${args.flight_number}`)
.then(res => res.data);
}
}
}
});
Results:
Front end
Just now, we all use graphql to call the interface in the browser. Next, let’s look at how to call GraphQL service in the front page. We use react at the front end.
Initialize react project in project root directory:
$ npx create-react-app client
In order to facilitate debugging, inpackage.json
Add scripts to:
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev":"concurrently \"npm run server\" \"npm run client\" "
Style We use a theme from bootswatch:
GraphQL has a variety of client implementations, which are used in this project.Apollo, the most popular GraphQL Client. For more client, please refer toGraphQL Clients.
Installation dependency
Install the following dependencies:
$ cd client
$ npm i apollo-boost react-apollo graphql
among themapollo-boost
Apollo client itself,react-apollo
It is the integration of react view layer.graphql
Query statement used to parse graphql.
Set client
ModifyApp.js
The content is as follows:
import React, { Component } from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import './theme.css';
import './App.css';
import logo from './spacex-logo-light.png'
const client = new ApolloClient({
uri: 'http://localhost:5000/graphql'
});
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<div className="container">
<img src={logo} id="logo" />
</div>
</ApolloProvider>
);
}
}
export default App;
And redux<Provider>
The delivery store is similar.react-apollo
via<ApolloProvider>
Pass apollo client down.
Implement query
Next, let’s implement the component that displays launches and add files.components/Launches.js
:
import React, { Component, Fragment } from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import LaunchItem from './LaunchItem';
const LAUNCHES_QUERY = gql`
query LaunchesQuery {
launches {
flight_number,
mission_name,
launch_date_local,,
launch_success,
}
}
`;
export class Launches extends Component {
render() {
return (
<Fragment>
<h1 className="display-4 my-3">Launches</h1>
<Query query={LAUNCHES_QUERY}>
{
({ loading, error, data }) => {
if (loading) return <h4>Loading...</h4>
if (error) console.log(error);
return (
<Fragment>
{
data.launches.map(launch => <LaunchItem key={launch.flight_number} launch={launch}/>)
}
</Fragment>
)
}
}
</Query>
</Fragment>
)
}
}
export default Launches
Query statement passedgraphql-tag
Definition, incoming<Query>
Perform data acquisition and pass inLaunchItem
Show.
components/LaunchItem.js
:
import React from 'react'
export default function LaunchItem({ launch: { flight_number, mission_name, launch_date_local, launch_success } }) {
return (
<div className="card card-body mb-3">
<div className="col-md-9">
<h4>Mission: {mission_name}</h4>
<p>Date: {launch_date_local,}</p>
</div>
<div className="col-md-3">
<button className="btn btn-secondary">Launch Details</button>
</div>
</div>
)
}
Query statement passedgraphql-tag
Definition, and then passed in<Query>
Execute.
run
Because of local debugging, client and server are running on different ports respectively, so cross-domain processing is required first, and thecors.
server.js
const cors = require('cors');
...
app.use(cors());
Effect
Well, it’s done, let’s look at the effect:
Conclusion
Today, I will mainly introduce the construction of GraphQL project and the use of GraphQL Query. more about GraphQL includeMutationI will explain it step by step with you next time when I am free.
The inspiration for this article is:Youtube@Traversy MediaThank you
This article Demo Github address:Github@MudOnTire
This article Demo online shows:Heroku@graphql-spacex-launches