Apollo Graphql客户端与React的Next.js示例

由于Apollo GraphQL官网的get-started示例，写得天花乱坠的感觉，实在看不下去，写的代码片段好像上下文关联不大，下面根据官网代码片段，解决错误后得出的最简单结果

Due to the get-started example of Apollo GraphQL official website, the feeling of being written in a mess is that it can't be read. The code fragment written seems to have little correlation. The following is the simplest result after solving the error according to the official website code fragment.

问题

下面是遇到的问题之一

Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

结果

import ApolloClient from 'apollo-boost';
import fetch from 'isomorphic-unfetch'
import { gql } from 'apollo-boost';
import { ApolloProvider, useQuery } from '@apollo/react-hooks';
const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
});


const Index = () => {
  const { loading, error, data } = useQuery(gql`
    {
      rates(currency: "USD") {
        currency
        rate
      }
    }
  `);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  let lists = data.rates.map(rate => {
    return (
      <div key={rate.currency} style={{margin: '10px'}}>
        <span style={{margin: '10px'}}>Currency:</span><span>{rate.currency} </span>
        <span style={{margin: '10px'}}>Rate:</span><span>{rate.rate}</span>
      </div>
    )
  })
  return (
      <div>
        <h2>My first Apollo app 🚀</h2>
        {lists}
      </div>
  )
};

const WithApollo = () => {
  return (
    <ApolloProvider client={client}>
      <Index />
    </ApolloProvider>
  )
}


export default WithApollo;

时间有限，在这里不做简单代码的解释，如需要了解详细请阅读文档

Time is limited, do not explain the simple code here, please read the documentation if you need to know the details.