React-Apollo-Prisma-Graphql

Posted 2021-01-30 zhaoyzml

　　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>
    );
  }
}