安装依赖:
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、属性