使您的GraphQL API更易于通过组件采用
首次改善使用新的GraphQL API的体验对于用户采用产品并使其参与至关重要。
但是，让人们第一次使用您的API可能很棘手。 为了为首次使用API创造成功的体验，您必须使它既易于理解又对人们有用，以便人们可以轻松地在自己的项目中开始使用。
示例是为新用户创建沙箱的好方法，让他们可以开始游戏。 问题是，示例很难在用户的项目上下文中使用。
Bit是一个开源项目，可以帮助用户亲自动手使用您的API示例。 下面是它的工作原理。
API文档悖论
了解API通常始于您的文档。
矛盾的是，大多数开发人员并不真正喜欢编写和阅读文档。 这使您和您的用户都难以为首次使用API创造良好的体验。
大多数开发人员在使用新API时真正寻找的是可以在项目中使用并轻松使用的示例。 问题是，在用户项目中修改示例可能很困难。
这就是为什么将示例作为“沙盒”供用户开始使用，更改其自己的项目并迅速转移到与我们的API的实际交互的重要性。
API示例使用Bit的沙箱
在外部环境中尝试示例并不能真正应用于用户的当前用例。 因此，您必须确保他们可以在自己的项目中直接在自己的上下文中使用这些示例。
Bit是一种工具，可以加快和简化项目之间的代码共享。
使用Bit，您可以直接从任何存储库中隔离和共享代码，使用NPM将其安装在其他项目中（无需安装Bit），并可以轻松地从任何其他存储库或项目对代码本身进行更改。
当涉及到GraphQL API时，这最后一部分可能会非常有用，因为用户可以将您的API示例作为重新使用的组件导入到自己的代码中，并可以轻松地对其进行更改以适应他们的需求。 让我们来看一个简单的例子。
示例：GitHub的GraphQL API
假设Github的人员希望使他们的GraphQL API更易于开发人员使用并开始使用。
API的使用范围包括GraphQL查询，创建连接到Github GraphQL API的Apollo客户端 ，甚至可能是调用该API的React组件的示例。
让我们使用Bit共享所有这些组件，并根据另一个项目的上下文对相关示例进行更改。
共享您的GraphQL API
这是一个包含GitHub的GraphQL API 的模板项目 。
我们可以使用位共享API为组件（称为范围）的集合， 像这样的 ，用户可以导入自己的代码。
与Bit共享我们的API
让我们从模板项目中共享GitHub的API组件。
对于此特定示例，我们将必须生成一个github令牌来访问GitHub的API。 然后，让我们将生成的令牌复制到./src/App.js目录中，而不是'YOUR TOEKN HERE'字符串中，然后运行NPM install。
npm i
npm start
就像Git一样，您可以在任何服务器上设置位范围。 为简单起见，让我们使用免费的Bit Hub并创建自己的Scope 。
让我们安装Bit并将其初始化为项目。
npm install bit-bin -g # init new bit scope
cd github-graphql-template
bit init
现在让我们为我们将共享的代码添加构建和测试环境。 Bit将在免费的集线器上的隔离环境中运行它们。
# adding compiler to make sure we can compile our code from any project
bit import bit.envs/compilers/react -c
# adding mocha as tester environment so we can run tests from any project
bit import bit.envs/testers/mocha -t
接下来，让我们使用Bit跟踪要共享的代码，并对其进行标记以锁定其版本，并在共享之前定义其依赖项。
我们还将运行status命令以查看一切正常。
# tracking all components with Bit
bit add src/*/* -t src/{PARENT}/{FILE_NAME}.spec.js
# lock a version for all components
bit tag --all 1.0.0
# see the tagged components waiting to be exported
bit status
最后，让我们将API组件共享给我们创建的Scope。
# export the components to your own scope
bit export [USERNAME.SCOPENAME]
在本教程中，我已经以该示波器为例进行了分享 。 现在可以从Bit的注册表中使用NPM在用户项目中安装这些组件，即使它们没有使用Bit且从未安装过。
用户还可以使用bit import来获取组件的实际源代码，并直接在自己项目的环境中进行更改。
用户可以在自己的项目中使用您的API
假设一个新用户正在尝试采用我们的API。
一旦接触到我们创建的范围，他们就可以将这些示例中的任何一个导入到自己的项目中，并开始对其进行更改以适合其实际用例。
这是代表用户项目的另一个示例项目。 如您在pakcgae.jso n看到的，用户甚至使用NPM安装了组件。 让我们克隆它来模拟用户的项目。
就本GitHub API示例而言，我们还生成令牌并再次将其复制到./src/App.js而不是“ YOUR TOEKN HERE”字符串中，然后运行NPM安装。
更改用户项目中的示例
假设尝试采用我们的API的开发人员希望将回购的标签列表添加到我们的应用中。 通常，这将是一个混乱的过程。
使用Bit，他们可以使用bit import来将querys / repo-info-issues组件的源代码导入到自己的项目中以进行更改。
# init Bit for the project
bit init
# bring the component's source code into your project
bit import giladshoham.github-graphql/queries/repo-info-issues
现在他们可以在components / queries / repo-info-issues下看到代码，并打开index.js文件以添加他们需要在nameWithOwner下添加10个标签列表的代码。
labels (last:10) {
edges {
node {
name,
color
}
}
} 更改后，他们还需要更改我们的react组件以显示列表。 同样，使用Bit，此工作流程变得简单。
用户可以将react组件导入他们的项目中。
# bring the component source code into your project
bit import giladshoham.github-graphql/react/repo-info-issues
现在可以在components / react / repo-info-issues下看到该代码，并且可以在问题ul下添加标签列表。
<ul style={{'listStyleType': 'none'}}>
{ repository.labels.edges.map( label => (
<li style={{'textAlign': 'left', 'color': `#${label.node.color}`}} key={label.node.name}>{label.node.name}
</li>) ) }
</ul>现在他们还可以编译新代码。
bit build
如您所见，Bit安装了编译组件所需的所有内容，因此我们的用户甚至无需安装任何程序即可工作。
现在他们可以简单地运行项目。
npm start
如您所见，您已正确呈现了新组件。
如果他们要共享组件的新版本，则可以标记组件并将其导出到自己的合并范围，并使用任何项目中的更新版本。
# see our status
bit status
# tag a new version of the modified components
bit tag -am "added labels list"
# export back to bitsrc.io
bit export [USERNAME.SCOPENAME]
就是这样。
结论
首次改善使用新GraphQL API的体验对于提高产品的采用率和参与度至关重要。
为了了解如何使您的GraphQL API更易于采用，我们让开发人员不得不采用API。
无需从实际的用例和项目的上下文中阅读冗长的文档或使用示例，我们可以使用Bit来帮助他们轻松地提取我们的API并对其进行自定义以适应他们自己的用例和项目的环境，从而实现更快，更简单地采用我们的API。
每当我发布新帖子时，我都会鸣叫 ，保证！ ✍
From: https://hackernoon.com/make-your-graphql-api-easier-to-adopt-through-components-74b022f195c1