React-Apollo-Prisma-Graphql
create-react-app: https://facebook.github.io/create-react-app/docs/getting-started
Apollo:https://www.graphql.college/building-a-github-client-with-react-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 <ApolloProvider client={client}> 5 <div> 6 <h2>My first Apollo app 🚀</h2> 8 </div> 9 </ApolloProvider> 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 = () => ( <Query query={gql` query { panels{ id title } } `} errorPolicy="all" > {({ loading, error, data }) => { if (loading) return <p>Loading...</p>; return ( <div> <h1>{data && data.panels[0].title}</h1> {error && ( <pre> <code> {error && error.graphQLErrors[0] && error.graphQLErrors[0].message} </code> </pre> )} {data && data.panels && <h3>{data.panels[0].title}</h3>} </div> ); }} </Query> );
将ExchangeRates添加到react组件中,完毕。
class App extends Component { render() { return ( <ApolloProvider client={client}> <div> <h2>My first Apollo app 🚀</h2> <ExchangeRates /> </div> </ApolloProvider> ); } }