使用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

二、参考源码传送门

三、查看博主更多文章