react
yarn add apollo-boost apollo-client react-apollo apollo-cache-inmemory apollo-link-http graphql-tag graphql
src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
// import { ApolloClient } from "apollo-client";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import gql from "graphql-tag";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
});
// 普通的JavaScript发送查询
client
.query({
query: gql`
{
hello
}
`,
})
.then(({ data }) => console.log(data));
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root"),
);
src/App.js
import React, { Component, Fragment } from "react";
import { Query, ApolloConsumer } from "react-apollo";
import gql from "graphql-tag";
class QueryAllCat extends Component {
render() {
const { title } = this.props;
const GET_CATS = gql`
query Getcats {
cats {
id
name
}
}
`;
return (
<Fragment>
<h3>{title}</h3>
<Query query={GET_CATS}>
{({ loading, error, data, refetch }) => {
if (error) return "error";
if (loading || !data) return "loading";
return (
<Fragment>
<ul>
{data.cats.map(el => (
<li key={el.id}>{el.name}</li>
))}
</ul>
<button onClick={() => refetch()}>重取!</button>
</Fragment>
);
}}
</Query>
</Fragment>
);
}
}
class FindCat extends Component {
state = {
id: "",
cat: null,
};
render() {
const { id, cat } = this.state;
const { title } = this.props;
const FIND_CAT = gql`
query findCat($id: ID!) {
findCat(id: $id) {
id
name
}
}
`;
return (
<Fragment>
<h3>{title}</h3>
<ApolloConsumer>
{client => (
<Fragment>
<input
type="text"
value={id}
onChange={e =>
this.setState({
id: e.target.value,
})
}
/>
<button
onClick={async () => {
const { data } = await client.query({
query: FIND_CAT,
variables: { id },
});
this.setState({
cat: data.findCat,
});
}}
>
findCat
</button>
{!!cat && (
<p>
{cat.id}::{cat.name}
</p>
)}
</Fragment>
)}
</ApolloConsumer>
</Fragment>
);
}
}
class App extends Component {
render() {
return (
<Fragment>
<QueryAllCat title="所有列表" />
<FindCat title="id查询" />
</Fragment>
);
}
}
export default App;
server
yarn add apollo-server graphql
index.js
const { ApolloServer, gql } = require("apollo-server");
const cats = [
{ id: 1, name: "ajanuw", age: 12 },
{ id: 2, name: "suou", age: 14 },
];
const typeDefs = gql`
type Query {
hello: String!
cats: [Cat]!
}
type Cat {
id: String
name: String
age: String
}
`;
const resolvers = {
Query: {
hello: () => "hello world",
cats() {
return cats;
},
},
};
const server = new ApolloServer({
typeDefs,
resolvers,
});
server.listen().then(({ url }) => {
console.log(`? Server ready at ${url}`);
});