服务端
这一节只介绍react中的用法
GraphQL 从入门到实践
服务端github代码
安装
在你的react项目中需要先安装几个包
npm i react-apollo apollo-boost graphql graphql-tag
ApolloClient配置
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "http://localhost:4000/"
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById("root")
);
Query
- 无参数
import { Query, graphql } from "react-apollo";
import gql from "graphql-tag";
const users = gql`
{
users {
name
age
gender
email
}
}
`;
function Users() {
return (
<Query query={users}>
{({ loading, error, data }) => {
return (
<>
{!loading &&
data.users.map(item => (
<div>
name: {item.name}
age: {item.age}
gender: {item.gender}
email: {item.email}
<br />
</div>
))}
</>
);
}}
</Query>
)
}
- 参数
const USER = gql`
query User($id: String!) {
user(id: $id) {
name
}
}
`;
function User() {
const [id, setId] = useState("2");
return (
<>
<h1>User</h1>
<input placeholder="input id" onChange={e => setId(e.target.value)} />
<Query query={USER} variables={{ id }}>
{({ loading, error, data }) => {
return (
!loading && (
<div>
name: {data.user.name}
age: {data.user.age}
gender: {data.user.gender}
email: {data.user.email}
<br />
</div>
)
);
}}
</Query>
</>
);
}
Mutations
const CREATE_USER = gql`
mutation CreateUser(
$id: ID!
$name: String!
$email: String!
$age: Int
$gender: Gender
) {
createUser(
id: $id
name: $name
email: $email
age: $age
gender: $gender
) {
id
name
email
age
}
}
`;
function User() {
const [id, setId] = useState("1");
const [name, setName] = useState("张三");
const [email, setEmail] = useState("11@22.com");
const [age, setAge] = useState();
const [gender, setGender] = useState();
return (
<>
<h1>Create User</h1>
<Mutation mutation={CREATE_USER}>
{(createUser, { data }) => {
console.log(createUser);
return (
<form
onSubmit={e => {
e.preventDefault();
createUser({variables : {id, name, email, age, gender}})
}}
>
*id: <input value={id} onChange={e => setId(e.target.value)} />
*name: <input value={name} onChange={e => setName(e.target.value)} />
*email:<input value={email} onChange={e => setEmail(e.target.value)} />
age: <input value={age} onChange={e => setAge(e.target.value)} />
gender:<input value={gender} onChange={e => setGender(e.target.value)} placeholder="MAN WOMAN" />
<input type="submit" />
</form>
);
}}
</Mutation>
</>
);
}
