yarn使用apollo

<code class=" hljs lasso hljs " codemark="1">我们首先要做的是在我们的项目中使用Apollo，因此请安装这些软件包。 apollo-client让我们配置Apollo的实例，而react-apollo是使我们能够将其集成到React应用程序中的驱动程序。 由于包裹问题(我认为)，我们还需要安装graphql 。

> yarn add apollo-client react-apollo graphql graphql-tag apollo-link-http

创建一个新目录src/apollo ，打开一个index.js文件，并添加以下内容：

import ApolloClient from ‘apollo-client’;
export const client = new ApolloClient({});

这将初始化我们的Apollo客户程序，然后通过在src/index.js文件内部添加以下内容来包装React应用程序。

import { ApolloProvider } from ‘react-apollo’;
import { client } from ‘./apollo’;
 
const WrappedApp = (
  
    
  
);
 
ReactDOM.render(WrappedApp, document.getElementById(‘root’));
// Don’t be a sap. Wrap your app.

现在，我们已经准备好在应用程序中使用Apollo。 重新启动开发服务器时，所有内容都会生成，但尝试在浏览器中访问它时会出现错误。 控制台将告诉我们，我们需要为Apollo客户端指定链接和缓存属性，所以让我们开始吧。

> yarn add apollo-link apollo-cache-inmemory apollo-link-state

前一行将新的Apollo依赖项添加到我们的应用程序中，而以下代码解决了我们遇到的控制台错误。 因此，请回到apollo/index.js并对其进行更新，以使该文件如下所示：

import ApolloClient from ‘apollo-client’;
import { InMemoryCache } from ‘apollo-cache-inmemory’;
import { ApolloLink } from ‘apollo-link’;
import { withClientState } from ‘apollo-link-state’;
 
const cache = new InMemoryCache();
const stateLink = withClientState({
  cache
});
const stateLink = createHttpLink({
    uri: '/api/graphql'    //请求路径
})
 
export const client = new ApolloClient({
  cache,
  link: ApolloLink.from([
    stateLink,
  ]),
})

然后在src/index.js测试中

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// 样式
import "./static/common-css/reset.css"
import 'antd/dist/antd.css';

import { ApolloProvider } from 'react-apollo';
import { client } from './apollo';

import {gql} from 'graphql-tag'

client.query({
    query:gql`
        query{
            getCategories{
                id,name
            }
        }
    `
}).then(result=>console.log(result))

ReactDOM.render(
	
    	
    ,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function

//在控制台中查看结果

在页面中使用

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