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

由于Apollo GraphQL官网的get-started示例,写得天花乱坠的感觉是在看不下去,写的代码片段好像上下关联不大,下面根据官网代码片段,解决错误后得出的最简单结果,Apollo Graphql客户端与React的Next.js示例

2 min read
By myfreax
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") {

  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>
  return (
        <h2>My first Apollo app 🚀</h2>

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

export default WithApollo;


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