[Day 22] - 『转职工作的Lessons learned』 - GraphQL (Hasura) - Apollo Client

GraphQL (Hasura)系列，忘记介绍最一开始从前端连线到GraphQL (Hasura)一个重要的套件 - Apollo Client。

大致介绍一下这个Appolo Client 是什麽，他是一个 GraphQL + React 套件，除了支援React之外，也可以套用在其他的框架上。 这个套件可以让我们用简单的方式去跟GraphQL server沟通。

可参考以下连线方式：

import React from 'react';
import { render } from 'react-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

function App() {
  return (
    <div>
      <h2>My first Apollo app ?</h2>
    </div>
  );
}

render(

  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'),
);
che: new InMemoryCache()
});

连线完毕後，搭配写好的Graphql语法

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

就可以使用类似像React Hook（比方说useState的方式）去跟Hasura取得资料

function ExchangeRates() {

  const { loading, error, data } = useQuery(EXCHANGE_RATES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

function App() {
  return (
    <div>
      <h2>My first Apollo app ?</h2>

      <ExchangeRates />
    </div>
  );
}