"index">{{item.title}}
item.title}}
// GraphQL Loader config.module .rule('graphql') .test(/.graphql$/) .use('graphql-tag /loader') .loader('graphql-tag/loader') .end() // 你还可以再添加一个 loader .use('
=> { // GraphQL Loader config.module .rule('graphql') .test(/.graphql$/) .use('graphql-tag /loader') .loader('graphql-tag/loader') .end() // 你还可以再添加一个 loader .use('other-loader
component,新增文件 components/Launches.js: import React, { Component, Fragment } from 'react'; import gql from 'graphql-tag } } </Query> </Fragment> ) } } export default Launches query语句通过 graphql-tag <button className="btn btn-secondary">Launch Details</button>
增加一个 GraphQL 客户端(Apollo 客户端) 安装 apollo-client, react-apollo, 和 graphql-tag。 $ npm install apollo-client react-apollo graphql-tag --save 打开 Redux 应用的入口文件 src/containers/AppContainer.js import gql from 'graphql-tag' // NOTE: lets us define GraphQL queries in a template language export import gql from 'graphql-tag' // NOTE: lets us define GraphQL queries in a template language export import gql from 'graphql-tag' // NOTE: lets us define GraphQL queries in a template language export
click="doAdd()">提交数据</button>
click="doEdit()">修改数据</button>
/reducers' +import gql from "graphql-tag"; +import { ApolloProvider } from "react-apollo"; +import ApolloClient
Apollo 所需的库是 apollo-boost,react-apollo,react-apollo-hooks,graphql-tag和graphql。 包含了查询 API 和在内存中缓存数据所需的工具, react-apollo 为React提供绑定, react-apollo-hooks 在 React Hook 中包装了 Apollo 查询, graphql-tag 1yarn add apollo-boost react-apollo react-apollo-hooks graphql-tag graphql graphql-code-generator 用于自动化 1import gql from 'graphql-tag'; 2 3export const QUERY_LAUNCH_LIST = gql` 4 query LaunchList { 5 1import gql from 'graphql-tag'; 2 3export const QUERY_LAUNCH_PROFILE = gql` 4 query LaunchProfile
} }) 好到此为止,基础配置就已经ok了 接下来就是实际的请求了 在vue 的组件中,比如 test.vue 我们的例子是带参数的查询 首先在组件里构建查询的变量 import gql from 'graphql-tag
(App) }) 简单查询 组件加载的时候就会去服务器请求数据,请求的数据会放在navList这个属性上面,在模板中可以直接使用当前属性 简单查询文档 带参数查询参考 import gql from'graphql-tag _id}}
/apollo' import gql from 'graphql-tag'; import { Feed } from "..
使用起来也很轻松,在上述 hello-world 目录下,也就是 package.json 同级的目录下,打开命令窗口执行: vue add apollo 这个命令会自动安装 npm 包:graphql graphql-tag
定义 graphql 文件 import gql from 'graphql-tag'; export const Login = gql` mutation WxLogin($code: String
订阅成功次数:{{receivedSubscriptionTimes}}
be less than ${expected}`, () => { expect(a + b).not.toBeLessThan(expected) }) }) 除此之外还有: htm graphql-tag