In this lesson I refactor a React component that utilizes the graphql higher-order component to the new Query render prop component baked into react-apollo.
Additional Resources: What‘s next for React Apollo
import React from "react"; import { render } from "react-dom"; import ApolloClient, { gql } from "apollo-boost"; import { ApolloProvider, Query } from "react-apollo"; const client = new ApolloClient({ uri: "https://graphql-pokemon.now.sh" }); const GET_POKEMON = gql` query($name: String!) { pokemon(name: $name) { name image } } `; const Pokemon = ({ name, image }) => { return ( <div> <div>{name}</div> <img src={image} /> </div> ); }; const PokemonQuery = () => ( <Query query={GET_POKEMON} variables={{ name: "pikachu" }}> {({ loading, error, data }) => { if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <Pokemon name={data.pokemon.name} image={data.pokemon.image} />; }} </Query> ); const ApolloApp = () => ( <ApolloProvider client={client}> <PokemonQuery /> </ApolloProvider> ); render(<ApolloApp />, document.getElementById("root"));
原文地址:https://www.cnblogs.com/Answer1215/p/8536853.html
时间: 2024-11-09 00:31:39