- \n
- \n
- macOS High Sierra<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Ruby 2.5.1<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Rails 5.2.2<\/ul>\n<\/li>\n<\/ul>\n
- \n
- graphql-ruby 1.8.11<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Vue 2.5.2<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
- MySQL 5.7.21<\/ul>\n
\u7531\u4e8egraphql-ruby\u7248\u672c\u4e3a1.8\uff0c\u56e0\u6b64\u6211\u4eec\u5c06\u4ee5\u57fa\u4e8e\u7c7b\u7684\u65b9\u5f0f\u8fdb\u884c\u63cf\u8ff0\u3002<\/p>\n
\u73af\u5883\u6784\u5efa<\/h1>\n
\u9996\u5148\uff0c\u6211\u4eec\u5c06\u4eceRails\u5f00\u59cb\u8fdb\u884c\u6784\u5efa\u3002
\n\u521b\u5efa\u4e00\u4e2a\u540d\u4e3agraphql_rails\u7684\u76ee\u5f55\u3002<\/p>\n$ <\/span>mkdir <\/span>graphql_rails ;<\/span> cd<\/span> $_<\/span>\r\n$ <\/span>bundle init\r\n<\/code><\/pre>\n\u6572\u51fb\u540e\u751f\u6210\u4e86Gemfile\u3002
\n\u7a0d\u4f5c\u7f16\u8f91\u3002<\/p>\nsource<\/span> 'https:\/\/rubygems.org'<\/span>\r\ngit_source<\/span>(<\/span>:github<\/span>)<\/span> {<\/span> |<\/span>repo<\/span>|<\/span> \"https:\/\/github.com\/<\/span>#{<\/span>repo<\/span>}<\/span>.git\"<\/span> }<\/span>\r\n\r\nruby<\/span> '2.5.1'<\/span>\r\n\r\n# Bundle edge Rails instead: gem 'rails', github: 'rails\/rails'<\/span>\r\ngem<\/span> 'rails'<\/span>,<\/span> '~> 5.2.2'<\/span>\r\n<\/code><\/pre>\n\u63a5\u4e0b\u6765\u6267\u884cbundle install\u3002<\/p>\n
$ <\/span>bundle install<\/span> --path<\/span> vendor\/bundler\r\n<\/code><\/pre>\n\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u8bf7\u6267\u884c”rails new”\u547d\u4ee4\u3002
\n\u7531\u4e8e\u6211\u4eec\u8981\u4f7f\u7528Vue.js\u4f5c\u4e3a\u524d\u7aef\uff0c\u8bf7\u5728\u9009\u9879\u4e2d\u6307\u5b9aVue\u3002<\/p>\n$ <\/span>bundle exec <\/span>rails new .<\/span> --webpack<\/span>=<\/span>vue\r\n<\/code><\/pre>\n\u4e00\u65e6\u5b8c\u6210\u540e\uff0c\u63a5\u4e0b\u6765\u4f1a\u6dfb\u52a0\u7528\u4e8eGraphQL\u7684gem\u7b49\u5185\u5bb9\u3002<\/p>\n
gem<\/span> 'mysql2'<\/span>\r\n\r\ngem<\/span> 'graphql'<\/span>\r\n\r\ngem<\/span> 'graphiql-rails'<\/span>\r\n<\/code><\/pre>\n\u4fee\u6539\u540e\u518d\u6b21\u6267\u884cbundle install\u3002<\/p>\n
$ <\/span>bundle install<\/span>\r\n<\/code><\/pre>\n\u7531\u4e8egraphql-ruby\u7684\u5f15\u5165\uff0c\u73b0\u5728\u53ef\u4ee5\u8f7b\u677e\u5730\u901a\u8fc7Rails\u7684generate\u547d\u4ee4\u521b\u5efagraphql\u73af\u5883\uff0c\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n
$ <\/span>bundle exec <\/span>rails g graphql:install\r\n<\/code><\/pre>\n\u7136\u540e\uff0c\u5728\/app\u76ee\u5f55\u4e0b\u751f\u6210\u4e86\u4e00\u4e2a\u65b0\u7684\u6587\u4ef6\u5939\u3002<\/p>\n
.<\/span>\r\n\u251c\u2500\u2500 graphql_rails_schema.rb\r\n\u251c\u2500\u2500 mutations\r\n\u2514\u2500\u2500 types\r\n \u251c\u2500\u2500 base_enum.rb\r\n \u251c\u2500\u2500 base_input_object.rb\r\n \u251c\u2500\u2500 base_interface.rb\r\n \u251c\u2500\u2500 base_object.rb\r\n \u251c\u2500\u2500 base_scalar.rb\r\n \u251c\u2500\u2500 base_union.rb\r\n \u251c\u2500\u2500 mutation_type.rb\r\n \u2514\u2500\u2500 query_type.rb\r\n<\/code><\/pre>\n\u56e0\u4e3a\u6211\u4eec\u8981\u4f7f\u7528MySQL\u6570\u636e\u5e93\uff0c\u6240\u4ee5\u5148\u542f\u52a8MySQL\u5e76\u7f16\u8f91database.yml\u6587\u4ef6\u3002<\/p>\n
$ <\/span>mysql.server start\r\n<\/code><\/pre>\ndefault: <\/span>&<\/span>default<\/span>\r\n adapter: <\/span>mysql2<\/span>\r\n encoding: <\/span>utf8<\/span>\r\n database: <\/span>rails_development<\/span>\r\n username: <\/span>root<\/span>\r\n password: \r\n<\/span><\/code><\/pre>\n\u7531\u4e8e\u672c\u6b21\u5047\u8bbe\u4f7f\u7528GraphQL\u8fdb\u884c\u7b80\u5355\u7684\u6587\u7ae0\u6570\u636e\u4f20\u8f93\uff0c
\n\u6211\u4eec\u9700\u8981\u751f\u6210\u4e00\u4e2a\u540d\u4e3aPost\u7684\u6a21\u578b\u3002
\n\u53ea\u9700\u8981\u6709\u6807\u9898\u548c\u5185\u5bb9\u4e24\u5217\u5c31\u53ef\u4ee5\u4e86\u3002
\n\u6211\u4eec\u8fd8\u8981\u63d0\u524d\u751f\u6210\u4e00\u4e2a\u4f5c\u4e3a\u524d\u7aef\u7aef\u70b9\u7684HomeContollor\u3002<\/p>\n$ <\/span>bundle exec <\/span>rails g controller Home index\r\n$ <\/span>bundle exec <\/span>rails g model Post title:string content:text\r\n$ <\/span>bundle exec <\/span>rails db:create\r\n$ <\/span>bundle exec <\/span>rails db:migrate\r\n<\/code><\/pre>\n\u6211\u4f1a\u751f\u6210\u7528\u4e8eGraphQL\u7684\u5bf9\u8c61\u3002<\/p>\n
$ <\/span>bundle exec <\/span>rails g graphql:object Post id<\/span>:ID! title:String! content:String!\r\n<\/code><\/pre>\n\u6211\u4eec\u5df2\u7ecf\u51c6\u5907\u597d\u4e86\uff01\u73b0\u5728\u53ef\u4ee5\u5c1d\u8bd5\u542f\u52a8\u670d\u52a1\u5668\u5e76\u901a\u8fc7\u6d4f\u89c8\u5668\u8fdb\u884c\u786e\u8ba4\u3002<\/p>\n
$ <\/span>bundle exec <\/span>rails s -p<\/span> 5000\r\n<\/code><\/pre>\n\u5728graphql-ruby\u4e2d\uff0c\u5b83\u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u4e00\u4e2a\u53ef\u4ee5\u76f4\u63a5\u751f\u6210\u548c\u6267\u884c\u7684\u6d4b\u8bd5\u5ba2\u6237\u7aef\u3002
\n\u5f53\u6211\u4eec\u68c0\u67e5routes.rb\u6587\u4ef6\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u786e\u8ba4\u5df2\u7ecf\u6dfb\u52a0\u4e86\u53ef\u4ee5\u8bbf\u95ee\u6d4b\u8bd5\u5ba2\u6237\u7aef\u7684\u8def\u7531\u3002<\/p>\nRails.application.routes.draw do\r\n if <\/span>Rails.env.development?\r\n mount GraphiQL::Rails::Engine, at: \"\/graphiql\"<\/span>, graphql_path: \"\/graphql\"<\/span>\r\n end\r\n post \"\/graphql\"<\/span>, to: \"graphql#execute\"<\/span>\r\n...\r\nend\r\n<\/code><\/pre>\n\u8ba9\u6211\u4eec\u5c1d\u8bd5\u8bbf\u95eehttp:\/\/localhost:5000\/graphiql\u3002<\/p>\n
![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8042913a08637a6a95b6\/35-0.png\" "\\"\\"")
<\/div>\n\u8ba9\u6211\u4eec\u6765\u5b9e\u9645\u5b9e\u73b0GraphQL\u3002<\/p>\n
\u8be2\u95ee\u548c\u53d8\u5f02<\/h1>\n
\u8ba9\u6211\u4eec\u5728\u6d4b\u8bd5\u5ba2\u6237\u7aef\u4e0a\u5b9e\u9645\u53d1\u9001\u8bf7\u6c42\u8bd5\u8bd5\u770b\u3002<\/p>\n
\u5728GraphQL\u4e2d\uff0c\u5982\u679c\u662f\u8fdb\u884c\u6570\u636e\u7684\u201c\u8bfb\u53d6\u201d\u64cd\u4f5c\uff0c\u53ef\u4ee5\u4f7f\u7528query\u3002\u800c\u5982\u679c\u662f\u8fdb\u884c\u6570\u636e\u7684\u201c\u521b\u5efa\u201d\u3001\u201c\u66f4\u65b0\u201d\u3001\u201c\u5220\u9664\u201d\u7b49\u64cd\u4f5c\uff0c\u5219\u53ef\u4ee5\u4f7f\u7528mutation\u3002<\/p>\n
\u4f7f\u7528\u67e5\u8be2\u83b7\u53d6\u6240\u6709\u6587\u7ae0\u3002<\/h2>\n
\u9996\u5148\uff0c\u521b\u5efa\u4e00\u4e2a\u5b57\u6bb5\u6765\u8bbf\u95eeGraphQL\u4e2d\u7684Post\u5bf9\u8c61\u3002<\/p>\n
module<\/span> Types<\/span>\r\n class<\/span> PostType<\/span> <<\/span> Types<\/span>::<\/span>BaseObject<\/span>\r\n field<\/span> :id<\/span>,<\/span> ID<\/span>,<\/span> null: <\/span>false<\/span>\r\n field<\/span> :title<\/span>,<\/span> String<\/span>,<\/span> null: <\/span>false<\/span>\r\n field<\/span> :content<\/span>,<\/span> String<\/span>,<\/span> null: <\/span>false<\/span>\r\n end<\/span>\r\nend<\/span>\r\n<\/code><\/pre>\n\u60a8\u9700\u8981\u5199\u51fa\u60a8\u60f3\u8981\u8bbf\u95eePostType\u5bf9\u8c61\u7684\u5217\u540d\uff0c\u5982\u4e0a\u6240\u8ff0\u3002<\/p>\n
\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u5728query_type.rb\u4e2d\u6dfb\u52a0\u4e00\u4e2a\u53ef\u4ee5\u8bfb\u53d6\u6587\u7ae0\u6570\u636e\u7684\u5b57\u6bb5\u3002<\/p>\n
module<\/span> Types<\/span>\r\n class<\/span> QueryType<\/span> <<\/span> Types<\/span>::<\/span>BaseObject<\/span>\r\n field<\/span> :all_posts<\/span>,<\/span> [<\/span>PostType<\/span>],<\/span> null: <\/span>false<\/span>\r\n def<\/span> all_posts<\/span>()<\/span>\r\n Post<\/span>.<\/span>all<\/span>\r\n end<\/span>\r\n end<\/span>\r\nend<\/span>\r\n<\/code><\/pre>\n\u4f60\u53ea\u662f\u505a\u4e86\u4e00\u4e2a\u7a7a\u7684\u53c2\u6570\u5f15\u7528\uff0c\u7136\u540e\u53ea\u662f\u7528Post.all\u800c\u5df2\u3002<\/p>\n
\u56e0\u6b64\uff0c\u5982\u679c\u6ca1\u6709CSRF\u4ee4\u724c\uff0c\u5c31\u4f1a\u88ab\u8d23\u5907\uff0c\u6240\u4ee5\u8fd9\u6b21\u6211\u4eec\u7279\u522b\u8bbe\u7f6e\u4e3a\u8df3\u8fc7\u4ee4\u724c\u68c0\u67e5\u3002<\/p>\n
class<\/span> GraphqlController<\/span> <<\/span> ApplicationController<\/span>\r\n skip_before_action<\/span> :verify_authenticity_token<\/span>\r\n...<\/span>\r\n<\/code><\/pre>\n\u63a5\u4e0b\u6765\uff0c\u4e3a\u4e86\u786e\u8ba4\uff0c\u6211\u4eec\u5148\u5728rails\u63a7\u5236\u53f0\u7b49\u5730\u521b\u5efa\u865a\u62df\u6570\u636e\u3002
\n\u521b\u5efa\u4e86\u865a\u62df\u6570\u636e\u540e\uff0c\u6211\u4eec\u5c06\u5728\u6d4b\u8bd5\u5ba2\u6237\u7aef\u4e2d\u4f20\u9012\u4e0b\u9762\u7684\u67e5\u8be2\u8bed\u53e5\u6765\u8fdb\u884c\u6d4b\u8bd5\u3002<\/p>\n{\r\n allPosts {\r\n title\r\n }\r\n}\r\n<\/code><\/pre>\n![\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8042913a08637a6a95b6\/51-0.png\" "\\"\\"")
<\/div>\n\u4f60\u5df2\u7ecf\u6210\u529f\u5730\u83b7\u53d6\u4e86\u6240\u6709\u6570\u636e\uff01\u6211\u4e5f\u786e\u8ba4\u53ea\u8fd4\u56de\u4e86\u6307\u5b9a\u7684\u6807\u9898\uff01<\/p>\n
\u4f7f\u7528\u7a81\u53d8\u6765\u521b\u5efa\u6587\u7ae0\u3002<\/h2>\n
\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u4f7f\u80fd\u591f\u521b\u5efa\u6587\u7ae0\u3002
\n\u9996\u5148\uff0c\u6211\u4eec\u8981\u5728MutationType\u4e2d\u6dfb\u52a0\u4e00\u4e2a\u7528\u4e8e\u521b\u5efa\u6587\u7ae0\u7684\u5b57\u6bb5\u3002<\/p>\nmodule<\/span> Types<\/span>\r\n class<\/span> MutationType<\/span> <<\/span> Types<\/span>::<\/span>BaseObject<\/span>\r\n field<\/span> :create_post<\/span>,<\/span> mutation: <\/span>Mutations<\/span>::<\/span>CreatePost<\/span>\r\n end<\/span>\r\nend<\/span>\r\n<\/code><\/pre>\n\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u6765\u5b9e\u73b0CreatePost\u7c7b\u3002<\/p>\n
module<\/span> Mutations<\/span>\r\n class<\/span> CreatePost<\/span> <<\/span> GraphQL<\/span>::<\/span>Schema<\/span>::<\/span>Mutation<\/span>\r\n null<\/span> false<\/span>\r\n\r\n argument<\/span> :title<\/span>,<\/span> String<\/span>,<\/span> required: <\/span>true<\/span>\r\n argument<\/span> :content<\/span>,<\/span> String<\/span>,<\/span> required: <\/span>true<\/span>\r\n\r\n field<\/span> :post<\/span>,<\/span> Types<\/span>::<\/span>PostType<\/span>,<\/span> null: <\/span>false<\/span>\r\n\r\n def<\/span> resolve<\/span>
<\/p>\n
- \n
- \n
<\/p>\n
- \n
- \n
<\/p>\n
- \n
- \n
<\/p>\n
- \n
- \n