react项目使用apollo链条grapql接口

使用apollo传送门做关于react连接graphql的项目

一、项目搭建

• 1、使用create-react-app创建一个react项目

• 2、安装react-graphql的基础包

  yarn add apollo-boost graphql react-apollo
  

• 3、在package.json中配置代理

  {
    ...
    "proxy":"http://localhost:8000/"
  }
  

• 4、修改react项目的入口文件(把client传递到子组件中)

  import ApolloClient from 'apollo-boost';
  import { ApolloProvider } from 'react-apollo';
  
  // Pass your GraphQL endpoint to uri
  const apolloClient = new ApolloClient({ uri: 'http://localhost:8000/graphql/' });
  
  const ClientRender = () => {
    let appComponent = (
      <ApolloProvider client={apolloClient}>
        <App />
      </ApolloProvider>
    )
    ReactDOM.render(appComponent, document.getElementById('root'));
  };
  
  export default ClientRender();
  

• 5、在组件中使用query查询语句(参考test1.jsx)

• 6、函数方式的组件可以参考test2.jsx(个人更习惯使用class构造组件的方式)

• 7、传递参数参考test4.jsx和test5.jsx

二、参考源码传送门