「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

GraphQLNonNull

接着上文，我们需要限制Person新增时，name、sex、age以及jobId都是必传参数，此时需要GraphQLNonNull类函数，具体代码如下所示：

const {
    ...,
    GraphQLNonNull
} = graphql

const Mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        addPerson: {
            type: PersonType,
            args: {
                name: {type: new GraphQLNonNull(GraphQLString)},
                sex: {type: new GraphQLNonNull(GraphQLString)},
                age: {type: new GraphQLNonNull(GraphQLInt)},
                jobId: {type: new GraphQLNonNull(GraphQLID)}
            },
            ...
        },
        addJob: {
            type: JobType,
            args: {
                name: {type: new GraphQLNonNull(GraphQLString)},
                department: {type: new GraphQLNonNull(GraphQLString)}
            },
       } 
    }
})

刷新页面，当我们漏传age参数时，会出现错误提示

React

我们当然不希望请求时，只能在浏览器界面输入，所以这节课我们引入React，结合第一节课讲的Apollo，向服务端发送请求，我们会创建Person、Job组件，它们会各自处理自己的Apollo请求

开始

全局安装create-react-app，再在当前项目的根目录下，执行create-react-app client，安装成功后，如下图所示：

$ npm install create-react-app -g

整体项目结构如下图所示：

启动client

在client目录下执行npm run start，可以看到页面启动后的地址为http://localhost:3000，而我们之前graphql的地址为http://localhost:4000，这两者的端口号是不一致的，这是因为4000这个端口，专门提供给graphql使用（处理转化数据），而3000端口，提供给客户端使用，客户端可进行get、post等各种请求

创建PersonList.js

修改入口App.js，删除多余文件，如App.css， reportWebVitals.js以及App.test.js等文件。App.js代码内容如下所示：

import PersonList from "./components/PersonList";

function App() {
      return (
            <div id="main">
            <h1>Persons List</h1>
            <PersonList></PersonList>
          </div>
      );
}

export default App;

在最新版本的ApolloClient类中，cache参数必须传递，强制使用内存缓存

PersonList.js代码如下所示：

const PersonList = props => {
    return (
        <div>
            <h4>All Person Name</h4>
        </div>
    );
}
  
export default PersonList; 
  

再次看http://localhost:3000，页面如下所示：

Apollo GraphQL

React相关的Apollo文档地址

另外，在排查问题的过程中，还发现另外一篇好文章，主要关于最新版react与graphql的使用实例

安装

npm install @apollo/client graphql

App.js引入Apollo

App.js的代码如下所示：

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider
} from '@apollo/client'
import PersonList from "./components/PersonList";

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
})
function App() {
  return (
    <ApolloProvider client={client}>
      <div id="main">
        <h1>Persons List</h1>
        <PersonList></PersonList>
      </div>
    </ApolloProvider>
  );
}

export default App;

PersonList.js使用useQuery查询数据

PersonList.js完整代码如下所示：

import { gql, useQuery } from '@apollo/client'

const PERSON_LIST = gql`
    {
        persons {
            name
        }
    }
`

function GetPersonList() {
    const { loading, error, data } = useQuery(PERSON_LIST)
    if (loading) return <p>Loading...</p>
    if (error) return <p>Error: {error}</p>
    return data.persons.map(({name}, index) => {
        return <li key={index}>{name}</li>
    })
}

const PersonList = props => {
    return (
        <div>
            <h4>All Person Name</h4>
            <ul>
                {
                    GetPersonList()
                }
            </ul>
        </div>
    );
}
  
export default PersonList;
  

gql里面的语法，大家有没有觉得很眼熟？唔。。。千万别怀疑自己，里面的查询语句便是之前我们在http://localhost:4000/graphql里输入的查询语句。

使用useQuery从数据库里取得想要的数据，网页效果如下图所示：

结语

今天的课程暂时先到这里，精彩在后续的课程里继续~~