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

二、參考原始碼傳送門