2021-02-07 - GraphQL - 学习/实践

小咪咪 2022-10-29 01:48 136阅读 0赞

1.应用场景

<table> 
 <tbody> 
  <tr> 
   <td>主要用于学习使用GraphQL, 进行项目开发.</td> 
  </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
  <tr> 
   <td> <h1><img alt="" height="466" src="https://img-blog.csdnimg.cn/20210929155009823.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56m_57Sg55m96KGr55qE5bCR5bm0,size_20,color_FFFFFF,t_70,g_se,x_16" width="447"></h1> <h1>1. 文档阅读</h1> 
    <blockquote> 
     <p><a href="https://graphql.cn/" title="GraphQL | A query language for your API" rel="nofollow">GraphQL | A query language for your API</a>&nbsp; &nbsp;//&nbsp; 中文文档</p> 
     <p><a href="https://graphql.cn/learn/" title="GraphQL 入门 | GraphQL" rel="nofollow">GraphQL 入门 | GraphQL</a>&nbsp;// 官网入门学习文档</p> 
     <p><a href="https://blog.csdn.net/qq_41882147/article/details/82966783" title="GraphQL入门有这一篇就足够了_charming的博客-CSDN博客_graphql" rel="nofollow">GraphQL入门有这一篇就足够了_charming的博客-CSDN博客_graphql</a>&nbsp; // 参考简单实践</p> 
     <p><a href="https://mp.weixin.qq.com/s/8QiHYJFul5RYhiMkNVVgAA" title="在 Laravel 应用中构建 GraphQL API" rel="nofollow">在 Laravel 应用中构建 GraphQL API</a>&nbsp;//&nbsp;在 Laravel 应用中构建 GraphQL API&nbsp;</p> 
     <p></p> 
     <p>视频:</p> 
     <p><a href="https://www.bilibili.com/video/BV1EE411e7zB?p=9&amp;spm_id_from=pageDriver" title="千锋-GraphQL教程，看过最详细的视频_哔哩哔哩_bilibili" rel="nofollow">千锋-GraphQL教程，看过最详细的视频_哔哩哔哩_bilibili</a>&nbsp; <span style="color:#f33b45;">// 作为入门教程 - 推荐</span></p> 
     <p></p> 
     <p>相关库：</p> 
     <p><a href="https://www.apollographql.com/docs/react/" title="Introduction to Apollo Client - Client (React) - Apollo GraphQL Docs" rel="nofollow">Introduction to Apollo Client - Client (React) - Apollo GraphQL Docs</a>&nbsp; // 用于react组件中请求graphql的客户端库</p> 
     <p><a href="https://www.apollographql.com/docs/react/get-started/" title="Get started with Apollo Client - Client (React) - Apollo GraphQL Docs" rel="nofollow">Get started with Apollo Client - Client (React) - Apollo GraphQL Docs</a>&nbsp;&nbsp;</p> 
     <p><a href="https://codesandbox.io/s/practical-snyder-48p1r2roz4?file=/index.js" title="Get started > Coinbase server - CodeSandbox" rel="nofollow">Get started &gt; Coinbase server - CodeSandbox</a>&nbsp; &nbsp;// 在线练习</p> 
     <p><img alt="" height="1052" src="https://img-blog.csdnimg.cn/20210319182148219.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"></p> 
     <p></p> 
     <p>讨论</p> 
     <p><a href="https://www.zhihu.com/question/38596306/answer/921027553" title="GraphQL 为何没有火起来? - 知乎" rel="nofollow">GraphQL 为何没有火起来? - 知乎</a>&nbsp;<span style="color:#7b7f82;">-- 建议看看，但是如果真要体会怎么样，还是要自己上手实践一波</span></p> 
    </blockquote> <h1>2. 整理输出</h1> <h3>官方介绍</h3> 
    <blockquote> 
     <p><span style="color:#7b7f82;">GraphQL[</span><span style="color:#a5a5a5;">Facebook开源</span><span style="color:#7b7f82;">]&nbsp;是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。</span></p> 
    </blockquote> <h3>公司项目</h3> 
    <blockquote> 
     <p><strong><span style="color:#7b7f82;">local env</span></strong></p> 
     <p></p> 
     <p>启动 graphql server</p> 
     <p><img alt="" height="503" src="https://img-blog.csdnimg.cn/20210319143315463.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="880"></p> 
     <p></p> 
     <p>界面访问：</p> 
     <p><img alt="" height="722" src="https://img-blog.csdnimg.cn/20210319143112241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"></p> 
     <p>或者使用</p> 
     <p>postman</p> 
     <p><img alt="" height="915" src="https://img-blog.csdnimg.cn/20210319143410223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="899"></p> 
     <p></p> 
     <p>stage：</p> 
     <p><img alt="" height="615" src="https://img-blog.csdnimg.cn/20210319143221668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"></p> 
     <p></p> 
     <p></p> 
     <p>打印出来请求， 可知：</p> 
     <p><img alt="" height="265" src="https://img-blog.csdnimg.cn/20210319144823977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="544"></p> 
     <p></p> 
     <p><img alt="" height="569" src="https://img-blog.csdnimg.cn/2021031914480073.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1104"></p> 
     <p><img alt="" height="242" src="https://img-blog.csdnimg.cn/20210319144939812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="451"></p> 
     <p></p> 
    </blockquote> <p></p> <p></p> <p></p> <p>后续补充</p> <p>...</p> </td> 
  </tr> 
 </tbody> 
</table>

3.问题/补充

<table> 
 <tbody> 
  <tr> 
   <td> <h3>1. graphql 与 <a href="https://blog.csdn.net/william_n/article/details/103809292" title="restful api" rel="nofollow">restful api</a>&nbsp;的优缺点对比?</h3> 
    <blockquote> 
     <p><a href="https://blog.csdn.net/william_n/article/details/103809292" title="Restful API - 学习/实践_william_n的博客-CSDN博客" rel="nofollow">Restful API - 学习/实践_william_n的博客-CSDN博客</a>&nbsp; //&nbsp;Restful API - 学习/实践</p> 
    </blockquote> </td> 
  </tr> 
 </tbody> 
</table>

4.参考

<table> 
 <tbody> 
  <tr> 
   <td> <p><a href="https://graphql.cn/" title="GraphQL | A query language for your API" rel="nofollow">GraphQL | A query language for your API</a>&nbsp; &nbsp;//&nbsp; 中文文档</p> <p><a href="https://graphql.cn/learn/" title="GraphQL 入门 | GraphQL" rel="nofollow">GraphQL 入门 | GraphQL</a>&nbsp;// 官网入门学习文档</p> <p><a href="https://blog.csdn.net/qq_41882147/article/details/82966783" title="GraphQL入门有这一篇就足够了_charming的博客-CSDN博客_graphql" rel="nofollow">GraphQL入门有这一篇就足够了_charming的博客-CSDN博客_graphql</a>&nbsp; // 参考简单实践</p> <p><a href="https://www.bilibili.com/video/BV1EE411e7zB?p=9&amp;spm_id_from=pageDriver" title="千锋-GraphQL教程，看过最详细的视频_哔哩哔哩_bilibili" rel="nofollow">千锋-GraphQL教程，看过最详细的视频_哔哩哔哩_bilibili</a>&nbsp; <span style="color:#f33b45;">// 作为入门教程 - 推荐</span></p> <p><a href="https://blog.csdn.net/william_n/article/details/103809292" title="Restful API - 学习/实践_william_n的博客-CSDN博客" rel="nofollow">Restful API - 学习/实践_william_n的博客-CSDN博客</a>&nbsp; //&nbsp;Restful API - 学习/实践</p> </td> 
  </tr> 
 </tbody> 
</table>

后续补充

...