create-react-app: https://facebook.github.io/create-react-app/docs/getting-started　　

　　Apollo:

　　Prisma:https://www.prisma.io/docs/

　　首先，在创建客户端之前，跟着Prisma教程起一个server，我这里的server地址：localhost:4000。然后，跟着create-react-app创建一个react项目，启动。

　　接着，在react项目中安装依赖：

npm install apollo-boost react-apollo graphql --save

　　创建一个客户端，并且指向Graphql服务器：

1 import ApolloClient from 'apollo-boost';2 3 const client = new ApolloClient({4   uri: "http://localhost:4000"5 });

　　创建一个Provider，直接用react-apollo里的ApplloProvider组件，用ApolloProvider作为一个容器去包裹其他需要访问Graphql服务器数据的react组件。

import { ApolloProvider } from "react-apollo";

1 class App extends Component { 2   render() { 3     return ( 4       
     
       5       
      
        6         
       
My first Apollo app ?
 8       
      
 9     
     10     );11   }12 }

 　　现在我们已经创建好了ApolloClient实例并且使用ApolloRrovider将client传进react组件，可以开始从Graphql服务器中取数据到react组件中了。引入gql和Query，查询我们事先在Graphql服务器上事先建好的数据，以下数据查询已有的panel并显示panel的id和title。

import gql from "graphql-tag";import { Query } from "react-apollo";

const ExchangeRates = () => (  
     
          {({ loading, error, data }) => {      if (loading) return 
      
Loading...
;      return (        
      
          
       
{data && data.panels[0].title}
          {error && (            
       
                              {error &&                  error.graphQLErrors[0] &&                  error.graphQLErrors[0].message}                          
          )}          {data && data.panels && 
       
{data.panels[0].title}
}        
      
      );    }}  
     );

　　将ExchangeRates添加到react组件中，完毕。

class App extends Component {  render() {    return (      
           
      
        
       
My first Apollo app ?
        
             
      
    
         );  }}