在React中使用graphql和express
新建一个react项目，依次安装apollo/client,graphql,graphql-tag
npm i @apollo/client graphql graphql-tag
【注意】： 一定要注意apollo的版本和react的版本要对应，否则后面用起来会报错，会很难受。
下面依次来做一下增删改查四种操作
查询
查询使用的是useQuery（）和useLazyQuery（）
- useQuery: useQuery接受一个graphql类型的代码片段，返回该接口执行的状态，数据以及其他信息等。在页面初始化时只调用一次
- useLazyQuery: 用法和useLazyQuery相同，但是需要人为触发去调用
以下是代码示例，带参的使用useLazyQuery,不带参的使用useQuery：不带参数的查询
//不带参数的
import {
useQuery, gql } from '@apollo/client';
function App (){
return <div>
APP
<DisplayLocations></DisplayLocations>
</div>
}
const GET_LOCATIONS = gql`
query {
getList {
na
age,
id
}
}
`;
function DisplayLocations() {
const {
loading, error, data } = useQuery(GET_LOCATIONS);
if (loading) return <p>Loading...</p>; //加载中的组件
if (error) return <p>Error : {
error.message}</p>; // 报错的组件
console.log({
data})
return <div> {
data.getList.map(item => <div key={
item.id}>
<p>{
item.id}</p>
<span>{
item.name}</span>---<span>{
item.age}</span>
</div>)
} </div>
}
export default App
当初始化时，useQuery会执行一次，返回数据。
带参数的查询
import {
useQuery,useLazyQuery, gql } from '@apollo/client';
import {
useState} from "react";
function App (){
return <div>
APP
<DisplayLocations></DisplayLocations>
</div>
}
const Get_Data = gql`
query getList($id: String) {
getList (id: $id){
name,
age,
id
}
}
`;
function DisplayLocations() {
const[inputVal,setInputVal] = useState('64cbcc1e408fc1046b44bb6c')
let [getList, {
loading,data,error}] = useLazyQuery(Get_Data)
if (loading) return <p>Loading...</p>; //加载中的组件
if (error) return <p>Error : {
error.message}</p>; // 报错的组件
console.log({
data})
return <div>
<input type="text" onChange={
(event)=>{
setInputVal(event.target.value)
getList({
variables: {
id: event.target.value} })
}}></input>
{
data&&data.getList.map(item => <div key={
item.id}>
<p>{
item.id}</p>
<span>{
item.name}</span>---<span>{
item.age}</span>
</div>
)
} </div>
}
export default App
以上组件会在input的change事件触发时执行查询，另： graphql的执行语句千万不要写错。
新增、修改、删除
此时我们用的hooks是useMutation，需要传参
//新增
import {
useMutation,useLazyQuery, gql } from '@apollo/client';
import {
useState} from "react";
function App (){
return <div>
APP
<DisplayLocations></DisplayLocations>
</div>
}
const Mutations_Data = gql`
mutation createPerson($input: TempInput) {
createPerson(input: $input){
name,
age,
id
}
}
`;
function DisplayLocations() {
let [createData, {
data}] = useMutation(Mutations_Data)
return <div>
<button onClick={
() => {
createData({
variables:{
input:{
name: '李白',
age:12
}
}})
}}>AddData</button>
</div>
}
export default App
修改
import {
useMutation,useLazyQuery, gql } from '@apollo/client';
import {
useState} from "react";
function App (){
return <div>
APP
<DisplayLocations></DisplayLocations>
</div>
}
const Mutations_Data = gql`
mutation updatePerson($id:String!,$input:TempInput) {
updatePerson(id: $id, input: $input){
name,
age,
id
}
}
`;
function DisplayLocations() {
let [updateData, {
data}] = useMutation(Mutations_Data)
return <div>
<button onClick={
() => {
updateData({
variables:{
id:'64cbcc1e408fc1046b44bb6c',
input:{
name: '牡丹',
age:12
}
}})
}}>UpdateData</button>
</div>
}
export default App
删除
import {
useMutation,useLazyQuery, gql } from '@apollo/client';
import {
useState} from "react";
function App (){
return <div>
APP
<DisplayLocations></DisplayLocations>
</div>
}
const Mutations_Data = gql`
mutation deletePerson($id:String!) {
deletePerson(id: $id)
}
`;
function DisplayLocations() {
let [deleteData, {
data}] = useMutation(Mutations_Data)
return <div>
<button onClick={
() => {
deleteData({
variables:{
id:'64cbcc1e408fc1046b44bb6c'}})
}}>DeleteData</button>
</div>
}
export default App
需要注意的是： graphql语句千万不要写错，少一个！都会报错，一定要和后端写的一模一样。