GraphQL——前端如何使用GraphQL接口请求

最新推荐文章于 2025-04-21 09:15:48 发布

cyt_web

最新推荐文章于 2025-04-21 09:15:48 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： vscode 编辑器 macos

本文链接：https://blog.youkuaiyun.com/cyt_web/article/details/124771966

前端开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了GraphQL作为API查询语言的优势，如何通过Apoolloader安装和配置，以及在React中调用接口和执行查询的操作。重点展示了如何利用GraphQL减少冗余，提升客户端数据获取的精确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余。

1、安装依赖

npm install gq-loader --save-dev

2、React调用接口

封装api.js

export const client = new ApolloClient({
    uri: postUrl,
    //   credentials: "include",  //production
    fetchOptions: {
        mode: 'cors',
    },
    headers: {
        'Hero-Z': 'abcd',
    },
})

例子
使用界面需要引入api.js
`

import { gql } from ‘apollo-boost’

import { client } from ‘components/apiPost’

查询接口

function getInfo() {
    client.query({
        query: gql`
        query  ($page:Int, $size: Int ){
            info{
                username
                datalist
            }
            follList( page:$page,size:$size) {
                visitMe{
                    lastAccessedTime
                    userName
                }
            }
            userList
        }
       ` , fetchPolicy: 'network-only',
                variables: {
                    page: 1,
                    size: 4
                }
            }).then(res => {
                console.log('res---', res)


            }).catch((err) => {
                setLoadState(false)
            })
        }

2.操作接口

在这里插入代码片