react使用apollo简单的获取列表

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

转载于:https://www.cnblogs.com/ajanuw/p/10003983.html