React结合Graphql使用

服务端

这一节只介绍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

1. 无参数

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>
  )
}

2. 参数

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>
    </>
  );
}

Subscription