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

前言

上节课，我们已完成实时显示新增数据的功能，这节课我们需完成【点击个人，实时显示详情信息】的功能

SINGLE_PERSON查询

queries.js增加SINGLE_PERSON，即单人查询功能，部分代码如下所示：

const SINGLE_PERSON = gql`
    query($id:ID!){
        person(id:$id) {
            id
            name
            sex
            age
            job {
                name
                department
                persons{
                    id
                    name
                    age
                    sex
                }
            }
        }
    }
`
export {
    ...,
    SINGLE_PERSON
}

ID!即我们之前在服务端定义的GraphQLID类型，感叹号表明该类型为必传字段

上面的代码通过Person的id查询到该人的姓名、性别、年龄及工作等相关信息，注意，我们这里需要返回该人的id信息，供后面的PersonDetail.js查询使用

PersonList.js

在该js文件内，完整代码如下所示：

import { useState } from 'react'
import { useQuery } from '@apollo/client'
import { PERSON_LIST } from '../queries/queries'
import PersonDetail from './PersonDetail'

const PersonList = props => {
    const [selectedId, setSelectedId] = useState('')

    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, id}, index) => {
            return <li key={index} onClick={(e) => setSelectedId(id)}>{name}</li>
        })
    }

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

data.persons里，每条数据都有id，这是因为在PERSON_LIST 查询接口内，我们新增了返回字段id，代码如下所示：

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

通过react的useState，将数据变为响应式，点击li时，通过setSelectedId修改选中的id值，并将该id作为props数据传给PersonDetail 组件

PersonDetail.js

在components文件夹下，增加PersonDetail.js组件，其代码如下所示：

import { useQuery } from '@apollo/client'
import { SINGLE_PERSON } from "../queries/queries"


const PersonDetail = props => {
    function GetSinglePerson() {
        const { loading, error, data } = useQuery(SINGLE_PERSON, {
            variables: {id: props.selectedId}
        })
        if (loading) return <p>Loading...</p>
        if (data && data.person) {
            const {name, sex, age, job} = data.person
            return (
                <div>
                    <h2>姓名：{name}</h2>
                    <p>性别: {sex}</p>
                    <p>年龄: {age}</p>
                    <p>职位: {job.name}</p>
                    <p>部门: {job.department}</p>
                    <h2>部门内所有人员信息：</h2>
                    <ul>
                        {
                            job.persons.map(a => {
                                return <li key={a.id}>姓名：{a.name}  性别：{a.sex}  年龄: {a.age}</li>
                            })
                        }
                    </ul>
                </div>
            )
        } else {
            return <div>无相关信息</div>
        }
    }
    return (
        <div id="person-detail">
            <p>人员详情：</p>
            {GetSinglePerson()}
        </div>
    )
}

export default PersonDetail;

使用useQuery将Person的id作为参数传入，感兴趣的同学可以查看官方文档

页面效果

刷新页面后，点击lisi，下面出现该人的详情信息及部门所有人员信息 ，如下图所示

至此，所有graphql相关的基础知识已全部讲解完毕，后面大家可以基于功能代码添加样式功能，谢谢你们的观看，我们下期课程（Chrome插件开发）再见