关于 ReactJS、Apollo 和 GraphQL 的热爱与情愫（第一部分）
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
爱💟和愤怒😠往往如此接近。
这是一系列文章，记录了我使用 Apollo、GraphQL 和 Reactjs 开发第一个项目时的感受。此外，你还将学习如何进行配置！
我总是对新鲜事物充满热爱和热情。第一次看到 GraphQL 时也是如此。我迫不及待地想学习这门新玩意儿！那是一个阴雨绵绵的周六，我想，这正是开始一个新项目的绝佳时机。
设置
我先从我的老朋友开始create-react-app。
npx create-react-app react-apollo
#or
yarn create react-app react-apollo
很简单。你已经有了 React 前端。现在切换目录并启动前端。
cd react-apollo
yarn start
#or
npm start
让我们在前端添加 Apollo 和 GraphQL。
在谷歌上搜索了一番之后，我找到了apollo-boost……。
它README.md看起来不错，所以我就安装了它。
npm I apollo-boost graphql react-apollo -S
#or
yarn add apollo-boost graphql react-apollo
好的，看起来不错。就是一个 Boost 包、一个基础 GraphQL 包和一个 React 集成包。简洁！
创建 Apollo 客户端
让我们来设置一下，也就是创建一个 Apollo 客户端。所以README.md建议使用以下代码。
import React from 'react';
import { render } from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
// Pass your GraphQL endpoint to uri
const client = new ApolloClient({ uri: 'https://nx9zvp49q7.lp.gql.zone/graphql' });
const ApolloApp = AppComponent => (
<ApolloProvider client={client}>
<AppComponent />
</ApolloProvider>
);
render(ApolloApp(App), document.getElementById('root'));
看完这段代码后，我eslint发现了三个问题🤔。`is`App没有被导入，而且render()渲染到了根目录。好吧，这里不能直接复制粘贴create-react-app，而且我们目前也没有 Apollo 的端点😩。谷歌再次拯救了我🙏。搜索后，open graphql endpoints我找到了宝可梦的端点！太好了。URI 是https://graphql-pokemon.now.sh`.`
好了，第一个问题解决了。让我们开始改变我们的create-react-app……
src/apollo.jsx首先，创建一个包含以下代码的文件。
import React from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
// Pass your GraphQL endpoint to uri
const client = new ApolloClient({ uri: 'https://graphql-pokemon.now.sh/' });
export default AppComponent => (
<ApolloProvider client={client}>
<AppComponent />
</ApolloProvider>
);
现在修改你的 index.js 文件，使其内容如下所示：
import { render } from 'react-dom';
import './index.css';
import ApolloApp from './apollo';
import App from './App';
import * as serviceWorker from './serviceWorker';
render(ApolloApp(App), document.getElementById('root'));
serviceWorker.unregister();
我们导入ApolloApp并封装了它App。ApolloApp是的，命名确实不太好。保存并检查一切是否仍然正常！看看终端是否localhost:3000运行正常😊。
我们的第一个查询
宝可梦 GraphQL 接口功能非常有限，我们只能通过名称或 ID 进行查询😯。
创建一个文件src/PokemonByName.js并添加以下代码。
import React from 'react';
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';
const GET_POKEMON = gql`
query pokemon($name: String!) {
pokemon(name: $name) {
id
number
name
}
}
`
export default ({ name }) => (
<Query query={GET_POKEMON} variables={{ name }}>
{({ loading, error, data }) => {
if (loading) return null;
if (error) return `Error!: ${error}`;
if(!!data.pokemon){
return (
<div>
{data.pokemon.name} {data.pokemon.number}
</div>
);
}
return (
<div>
{name} not Found
</div>
);
}}
</Query>
);
😵 哇，代码好多啊！我们正在创建一个名为 GET_POKEMON 的查询。`GraphQL`gql是一种模板语言。`name`$name是一个类型为 `Pokemon` 的变量String，它是必需的。之所以是必需的，是因为这里有一个 `Pokemon` 对象!。该查询将返回一个包含宝可梦内部 ID、图鉴编号和名称的对象。我们还创建了一个组件，用于实际发送 GraphQL 查询。我们将宝可梦的名称作为 prop 传递。如果页面仍在加载，则不会渲染任何内容。如果出现错误，我们会渲染一个错误信息，然后检查是否找到了宝可梦。如果找到了，则渲染名称和编号；如果没有找到，则渲染一条消息，提示未找到具有该名称的宝可梦。
让我们实际操作一下，让屏幕上能显示一些东西！
所以请将文件更改src/app.js为以下内容。
import React, { Fragment } from 'react';
import PokemonByName from './PokemonByName';
import './App.css';
const App = () => (
<Fragment>
<PokemonByName name={'pikachu'} />
<PokemonByName name={'charmander'} />
<PokemonByName name={'bulbasaur'} />
</Fragment>
)
export default App;
我们正在导入新组件，然后将其添加到 App 组件中三次。现在保存所有内容，看看浏览器是如何渲染屏幕上的宝可梦的！太漂亮了😍！
现在我们知道如何将 GraphQL 端点集成到我们的应用程序中了。
下次我们将尝试创建自己的 GraphQL 端点！我很好奇结果会如何（或者是否成功）。
感谢阅读！
哈喽！ Instagram | Twitter | LinkedIn | Medium
文章来源：https://dev.to/lampewebdev/love-and-affection-about-reactjs-apollo-and-graphql-part-1-51fg