Apollo学习笔记

安装依赖：

npm install @apollo/client graphql react

初始化Apollo Client

# 导入依赖库
const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

# 创建ApolloClient实例
const client = new ApolloClient({
    uri: 'http://localhost:4000/',
    cache: new InMemoryCache(),
});

该例子中使用的uri和cache参数：

        uri：指定GraphQL的server地址

        cache：Apollo Client用来缓存查询结果

使用Apollo Client执行查询

# 执行查询
client.query({
    query: gql`
        query {
            hello
        }
    `,
}).then((result) => {
    console.log(result);
});

完整代码：

const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

const client = new ApolloClient({
    uri: 'http://localhost:4000/',
    cache: new InMemoryCache(),
});

client.query({
    query: gql`
        query {
            hello
        }
    `,
}).then((result) => {
    console.log(result);
});

将以上代码保存到test.js文件中，运行

node test.js



{ data: { hello: 'Hello World!' }, loading: false, networkStatus: 7 }

一、查询

使用useQuery勾子获取数据

执行查询

useQuery勾子是用于Apollo应用程序中执行查询的主要API。在React组件中运行查询，调用并传递Graphql查询字符串。当组件渲染时，从Apollo Client返回对象，包含用于渲染UI、属性