{"id":47871,"date":"2023-03-12T18:13:45","date_gmt":"2023-02-17T13:08:09","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/"},"modified":"2024-04-29T18:34:27","modified_gmt":"2024-04-29T10:34:27","slug":"%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/","title":{"rendered":"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b"},"content":{"rendered":"<h2>\u9996\u5148<\/h2>\n<p>graphql-scalars\u662f\u4e00\u500bJavaScript\u5eab\uff0c\u6536\u96c6\u4e86GraphQL\u7684\u81ea\u5b9a\u7fa9\u6a19\u91cf\u3002\u5b83\u4e0d\u50c5\u53ef\u4ee5\u5d4c\u5165\u61c9\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528\uff0c\u9084\u53ef\u4ee5\u5e6b\u52a9\u4e86\u89e3\u81ea\u5b9a\u7fa9\u6a19\u91cf\u7684\u5177\u9ad4\u4f8b\u5b50\uff0c\u5982EmailAddress\u985e\u578b\u548cURL\u985e\u578b\u7b49\uff0c\u4e26\u4e14\u5c0d\u65bc\u611f\u8208\u8da3\u7684\u4eba\u4f86\u8aaa\uff0c\u5982\u679c\u67e5\u770b\u6e90\u4ee3\u78bc\uff0c\u5b83\u53ef\u4ee5\u4f5c\u70ba\u81ea\u5b9a\u7fa9\u6a19\u91cf\u5e8f\u5217\u5316\/\u53cd\u5e8f\u5217\u5316\u65b9\u6cd5\u7684\u53c3\u8003\u5be6\u73fe\u7684\u826f\u597d\u7bc4\u4f8b\u3002<\/p>\n<p>\u90a3\u4e48\u8ba9\u6211\u4eec\u5728\u672c\u6559\u7a0b\u4e2d\u5b66\u4e60\u4e00\u4e0b\u5982\u4f55\u4f7f\u7528 graphql-scalars\u3002<\/p>\n<h3>\u8bf7\u63d0\u4f9b\u53c2\u8003\u6587\u732e\u3002<\/h3>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">GraphQL Scalars (graphql-scalars npm package) &#8211; Introduction<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">GraphQL (graphql.org) &#8211; Learn \/ Schemas and Types \/ Scalar types<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Apollo Server &#8211; Custom scalars<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Wantedly Engineer Blog &#8211; graphql-codegen \u3068 Nominal Typing(Branded Type) \u3067 Custom Scalar \u3092\u3061\u3087\u3063\u3068\u3044\u3044\u611f\u3058\u306b\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Richard Imaoka Notion &#8211; GraphQL custom scalar \u3092\u4f7f\u3046\u30e2\u30c1\u30d9\u30fc\u30b7\u30e7\u30f3\u3068 graphql-scalars \u30e9\u30a4\u30d6\u30e9\u30ea<\/ul>\n<h3>\u4e8b\u524d\u51c6\u5907 (Sh\u00ec<\/h3>\n<p>\u8bf7\u786e\u8ba4\u5df2\u5b89\u88c5Node.js\u548cnpm\u3002<\/p>\n<h3>\u514b\u9686 Git \u4ee3\u7801\u5e93<\/h3>\n<p>\u8bf7\u5728\u7ec8\u7aef\u4e2d\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"go\">git clone https:\/\/github.com\/richardimaoka\/tutorial-graphql-scalars.git\r\ncd tutorial-graphql-scalars\r\n<\/span><\/code><\/pre>\n<h2>1. \u8bbe\u7f6e Apollo Server \u548c GraphQL Codegen<\/h2>\n<p>\u8ba9\u6211\u4eec\u6309\u7167\u4e0b\u56fe\u7684\u65b9\u5f0f\u4f7f\u75283\u4e2a\u7ec8\u7aef\u3002\u9996\u5148\uff0c\u5728\u7b2c\u4e00\u4e2a\u7ec8\u7aef\u4e0a\u542f\u52a8\uff0c\u7136\u540e\u4ece\u6a21\u7248\u8bbe\u7f6e\u5230\u6267\u884cGraphQL Codegen\u7684\u6b65\u9aa4\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/12-0.png\" alt=\"\u30a2\u30fc\u30c8\u30dc\u30fc\u30c9 15.png\" \/><\/div>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002\u53ef\u4ee5\u76f4\u63a5\u5168\u90e8\u590d\u5236\u5e76\u7c98\u8d34\u8fdb\u884c\u64cd\u4f5c\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"go\">mkdir server\r\ncd server\r\n\r\n<\/span><span class=\"gp\">#<\/span> node.js setup\r\n<span class=\"go\">npm init -y\r\n<\/span><span class=\"gp\">echo \"node_modules\" &gt;<\/span> .gitignore\r\n\r\n<span class=\"gp\">#<\/span> <span class=\"nb\">install <\/span>and initialize typescript\r\n<span class=\"go\">npm install --save-dev typescript\r\nnpx tsc --init\r\n\r\n<\/span><span class=\"gp\">#<\/span> ts-node-dev: watch and restart a TypeScript server\r\n<span class=\"go\">npm install --save-dev ts-node-dev\r\nnpm pkg set scripts.start=\"ts-node-dev --watch src\/* --respawn src\/index.ts\"\r\n\r\n<\/span><span class=\"gp\">#<\/span> apollo server\r\n<span class=\"go\">npm install apollo-server graphql\r\n\r\n<\/span><span class=\"gp\">#<\/span> <span class=\"nb\">install <\/span>and setup graphql-codegen\r\n<span class=\"go\">npm install --save-dev @graphql-codegen\/cli\r\n<\/span><span class=\"gp\">#<\/span> \u3053\u3053\u3067 npx graphql-code-generator init \u3092\u884c\u3063\u3066\u3082\u3088\u3044\u304c\u3001\u305d\u3046\u3059\u308b\u3068\u5bfe\u8a71\u30e2\u30fc\u30c9\u306b\u5165\u3063\u3066\u624b\u5165\u529b\u304c\u5897\u3048\u308b\u306e\u3068\u3001\r\n<span class=\"gp\">#<\/span> \u7d50\u5c40\u306f npx graphql-code-generator init \u3067\u751f\u6210\u3055\u308c\u305fconfig.yml\u3092\u4e0a\u66f8\u304d\u66f4\u65b0\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u306e\u3067\u3001\u4ee5\u4e0b\u306fnpm install\u306e\u307f\u884c\u3063\u3066 config.yml\u306f\u5f8c\u307b\u3069\u4f5c\u6210\r\n<span class=\"go\">npm install --save-dev  @graphql-codegen\/typescript @graphql-codegen\/typescript-resolvers\r\n<\/span><span class=\"gp\">npm pkg set scripts.generate=\"graphql-codegen --config codegen.yml --watch .\/schema.gql\" #<\/span> update generate script\r\n\r\n<span class=\"gp\">#<\/span> copy files\r\n<span class=\"go\">mkdir src\r\nmkdir data\r\n<\/span><span class=\"gp\">curl https:\/\/raw.githubusercontent.com\/richardimaoka\/tutorial-apollo-server-setup\/main\/server\/codegen.yml &gt;<\/span> codegen.yml\r\n<span class=\"gp\">curl https:\/\/raw.githubusercontent.com\/richardimaoka\/tutorial-apollo-server-setup\/main\/server\/schema.gql &gt;<\/span> schema.gql\r\n<span class=\"gp\">curl https:\/\/raw.githubusercontent.com\/richardimaoka\/tutorial-apollo-server-setup\/main\/server\/src\/index.ts &gt;<\/span> src\/index.ts\r\n<span class=\"gp\">curl https:\/\/raw.githubusercontent.com\/richardimaoka\/tutorial-apollo-server-setup\/main\/server\/data\/Query.json &gt;<\/span> data\/Query.json\r\n<\/code><\/pre>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"go\">npm run generate\r\n<\/span><\/code><\/pre>\n<p>\u7ed3\u679c\uff1a\u5982\u679c\u4ee5\u4ee5\u4e0b\u65b9\u5f0f\u663e\u793a\uff0c\u90a3\u5c31\u6ca1\u95ee\u9898\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"go\">\u2714 Parse Configuration\r\n\u2714 Generate outputs\r\n  \u2139 Watching for changes...\r\n<\/span><\/code><\/pre>\n<p>\u8bf7\u4fdd\u6301\u8fd9\u4e2a\u7ec8\u7aef\u4e0d\u95f4\u65ad\u5730\u8fd0\u884c GraphQL Codegen \u8fdb\u7a0b\u3002<\/p>\n<p>\u8bf7\u6253\u5f00\u4e00\u4e2a\u65b0\u7684\u7ec8\u7aef\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/21-0.png\" alt=\"\u30a2\u30fc\u30c8\u30dc\u30fc\u30c9 16.png\" \/><\/div>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"go\">cd server\r\nnpm start\r\n<\/span><\/code><\/pre>\n<p>\u7ed3\u679c\uff1a\u5982\u679c\u663e\u793a\u5982\u4e0b\u5185\u5bb9\u5219\u8868\u793aOK\u3002\u8fd9\u6837Apollo Server\u5c31\u542f\u52a8\u6210\u529f\u4e86\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"go\">[INFO] 14:30:40 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.5.4)\r\n?  Server ready at http:\/\/localhost:4000\/\r\n<\/span><\/code><\/pre>\n<h2>\u7528 graphql-scalars \u5728 field \u7c7b\u578b\u4e2d\u8fdb\u884c\u64cd\u4f5c\u9a8c\u8bc1<\/h2>\n<p>\u8bf7\u6253\u5f00\u4e00\u4e2a\u65b0\u7684\u7ec8\u7aef\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/28-0.png\" alt=\"\u30a2\u30fc\u30c8\u30dc\u30fc\u30c9 17.png\" \/><\/div>\n<p>\u52a8\u4f5c\uff1a\u8bf7\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>shellcheck disable=SC2164 # REMOVE THIS IN aggregate.sh\r\n(cd server &amp;&amp; npm install graphql-scalars)\r\n<\/code><\/pre>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/e7c78aa.patch <span class=\"c\"># update schema.gql<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4ee5\u4e0a\u547d\u4ee4\u66f4\u65b0\u7684 schema.gqlserver\/schema.gql<br \/>\n\u6807\u91cf EmailAddress<\/p>\n<p>\u7c7b\u578b Person {<br \/>\nemailAddress: EmailAddress<br \/>\nname: String<br \/>\n}<\/p>\n<p>\u7c7b\u578b Query {<br \/>\nme: Person<br \/>\n}<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u5728\u8fd9\u79cd\u72b6\u6001\u4e0b\u4f1a\u51fa\u73b0\u9519\u8bef\u7ec8\u7aef<br \/>\n\u9519\u8bef\uff1a\u5728\u89e3\u6790\u5668\u4e2d\u5b9a\u4e49\u4e86Query.hello\uff0c\u4f46\u5728\u6a21\u5f0f\u4e2d\u672a\u5b9a\u4e49<\/p>\n<\/details>\n<p>\u6211\u4eec\u6765\u89e3\u51b3\u8fd9\u4e2a\u9519\u8bef\u5427\u3002<\/p>\n<p>\u8bf7\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/94f9796.patch <span class=\"c\"># update index.ts<\/span>\r\ngit apply patches\/789bf5a.patch <span class=\"c\"># update Query.json<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u5c06\u66f4\u65b0index.ts\u6587\u4ef6\u3002server\/src\/index.ts\u6587\u4ef6:<\/p>\n<p>import { ApolloServer, gql } from &#8220;apollo-server&#8221;;<br \/>\nimport * as fs from &#8220;fs&#8221;;<br \/>\nimport { EmailAddressResolver } from &#8220;graphql-scalars&#8221;;<br \/>\nimport { Query, Resolvers } from &#8220;.\/generated\/graphql&#8221;;<\/p>\n<p>const typeDefs = gql`<br \/>\n${fs.readFileSync(__dirname.concat(&#8220;\/..\/schema.gql&#8221;), &#8220;utf8&#8221;)}<br \/>\n`;<\/p>\n<p>interface LoadingDataContext {<br \/>\nQuery: Query;<br \/>\n}<\/p>\n<p>const resolvers: Resolvers = {<br \/>\nQuery: {<br \/>\nme(_parent, _args, context, _info) {<br \/>\nreturn context.Query.me;<br \/>\n},<br \/>\n},<br \/>\nPerson: {<br \/>\nname(parent, _args, _context, _info) {<br \/>\nreturn parent.name;<br \/>\n},<br \/>\nemailAddress(parent, _args, _context, _info) {<br \/>\nreturn parent.emailAddress;<br \/>\n},<br \/>\n},<br \/>\nEmailAddress: EmailAddressResolver,<br \/>\n};<\/p>\n<p>const readJsonFile = async (relativeFileName: string): Promise =&gt; {<br \/>\nconst jsonDataFile = __dirname.concat(relativeFileName);<br \/>\nconst fileContent = await fs.promises.readFile(jsonDataFile, &#8220;utf8&#8221;);<br \/>\nconst jsonData = JSON.parse(fileContent);<br \/>\nreturn jsonData;<br \/>\n};<\/p>\n<p>const server = new ApolloServer({<br \/>\ntypeDefs,<br \/>\nresolvers,<br \/>\ncontext: async ({ req }: any) =&gt; {<br \/>\ntry {<br \/>\nconst queryData: LoadingDataContext = await readJsonFile(<br \/>\n&#8220;\/..\/data\/Query.json&#8221;<br \/>\n);<br \/>\nreturn { Query: queryData };<br \/>\n} catch (err) {<br \/>\nconsole.log(&#8220;***\u53d1\u751f\u9519\u8bef***&#8221;);<br \/>\nconsole.log(err);<br \/>\nthrow new Error(&#8220;\u53d1\u751f\u5185\u90e8\u9519\u8bef\uff01\uff01&#8221;);<br \/>\n}<br \/>\n},<br \/>\n});<\/p>\n<p>\/\/ `listen`\u65b9\u6cd5\u542f\u52a8\u4e00\u4e2aWeb\u670d\u52a1\u5668\u3002<br \/>\nserver.listen().then(({ url }) =&gt; {<br \/>\nconsole.log(`? \u670d\u52a1\u5668\u5df2\u542f\u52a8\uff0cURL\u4e3a\uff1a${url}`);<br \/>\n});<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684 Query.json \u662f\u4f4d\u4e8e\u670d\u52a1\u5668\/\u6570\u636e\u76ee\u5f55\u4e0b\u7684 Query.json \u6587\u4ef6\u3002<br \/>\n{<br \/>\n&#8220;me&#8221;: {<br \/>\n&#8220;emailAddress&#8221;: &#8220;jason.summerwinnter@gmail.com&#8221;,<br \/>\n&#8220;name&#8221;: &#8220;Jason Summerwinter&#8221;<br \/>\n}<br \/>\n}<\/details>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/3e255ab.patch <span class=\"c\"># return 10 in EmailAddress<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u4f1a\u66f4\u65b0 index.ts\u3002\u5728 server\/src\/index.ts \u4e2d\uff1a<br \/>\n\u90ae\u7bb1\u5730\u5740\uff08parent, _args, _context, _info\uff09{<br \/>\n&#8211; \u8fd4\u56de parent.emailAddress;<br \/>\n+ \u8fd4\u56de 10;<br \/>\n}<\/p>\n<\/details>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/43-0.png\" alt=\"2022-08-09_05h46_24.png\" \/><\/div>\n<p>\u4e0a\u8ff0\u7684\u6e90\u4ee3\u7801\u4ee5 return 10 \u4f5c\u4e3a\u8fd4\u56de number \u7c7b\u578b\u7684\u503c\uff0c\u867d\u7136\u8fd0\u884c\u65f6\u9519\u8bef\u4f1a\u88ab\u8f93\u51fa\uff0c\u4f46 TypeScript \u7684\u9759\u6001\u7c7b\u578b\u68c0\u67e5\u4e0d\u4f1a\u8f93\u51fa\u9519\u8bef\u3002<\/p>\n<p>\u7531\u4e8e number \u7c7b\u578b\u65e0\u6cd5\u8868\u793a GraphQL \u7684 EmailAddress \u7c7b\u578b\u7684\u503c\uff0c\u6240\u4ee5\u5e0c\u671b\u5728 TypeScript \u7684\u7c7b\u578b\u68c0\u67e5\u4e2d\u62a5\u9519\u3002\u56e0\u6b64\uff0c\u8ba9\u6211\u4eec\u8fdb\u884c\u4ee5\u4e0b\u66f4\u6539\u3002<\/p>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/12e6f2b.patch <span class=\"c\"># Update codegen.yml to set EmailAddress as string<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c: \u4f7f\u7528\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684config.ymlconfig.yml<br \/>\n\u751f\u6210:<br \/>\nsrc\/generated\/graphql.ts:<br \/>\n\u63d2\u4ef6:<br \/>\n&#8211; &#8220;typescript&#8221;<br \/>\n&#8211; &#8220;typescript-resolvers&#8221;<br \/>\n\u914d\u7f6e:<br \/>\n\u907f\u514d\u9009\u9879: true<br \/>\n+ \u6807\u91cf:<br \/>\n+ EmailAddress: \u5b57\u7b26\u4e32<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u968f\u7740config.yml\u7684\u66f4\u6539\uff0cgenerated\/graphql.ts\u5c06\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002server\/src\/generated\/graphql.ts<br \/>\nexport type Scalars = {<br \/>\nID: string;<br \/>\nString: string;<br \/>\nBoolean: boolean;<br \/>\nInt: number;<br \/>\nFloat: number;<br \/>\n&#8211; EmailAddress: any;<br \/>\n+ EmailAddress: string;<br \/>\n};<\/p>\n<\/details>\n<p>\u901a\u904e\u4ee5\u4e0a\u7684\u66f4\u6539\uff0c\u578b\u68c0\u67e5\u4f1a\u751f\u6548\u3002\u5728\u671f\u671b\u8fd4\u56de\u5b57\u7b26\u4e32\u7684 emailAddress Resolver \u4e2d\u8fd4\u56de\u6570\u5b57\uff0c\u4f1a\u663e\u793a\u9519\u8bef\u4fe1\u606f\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/51-0.png\" alt=\"2022-08-06_21h33_37.png\" \/><\/div>\n<p>\u5c3d\u7ba1TypeScript\u7684\u7c7b\u578b\u68c0\u67e5\u5de5\u4f5c\u826f\u597d\uff0c\u4f46\u4ec5\u4f7f\u7528graphql-scalars\u63d0\u4f9b\u7684\u529f\u80fd\u8fdb\u884c\u7c7b\u578b\u68c0\u67e5\u5b58\u5728\u4ee5\u4e0b\u9650\u5236\uff1a<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">string \u304c\u671f\u5f85\u3055\u308c\u308b\u3068\u3053\u308d\u3067 number \u3092 return \u3059\u308b\u3088\u3046\u306a\u30a8\u30e9\u30fc\u3092\u691c\u51fa\u3067\u304d\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u3057\u304b\u3057\u3001string \u3067\u306f\u3042\u308b\u3082\u306e\u306e\u3001EmailAddress \u306e\u5f62\u5f0f\u3068\u3057\u3066\u9593\u9055\u3063\u3066\u3044\u308b\u3082\u306e\u306f\u30a8\u30e9\u30fc\u306b\u306f\u306a\u308a\u307e\u305b\u3093<\/ul>\n<p>\u8ba9\u6211\u4eec\u786e\u8ba4\u4e00\u4e0b\u5427\u3002<\/p>\n<p>\u52a8\u4f5c: \u8bf7\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/0bfed3d.patch <span class=\"c\"># wrong email address format passes type checking<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684index.tsserver\/src\/index.ts<br \/>\nemailAddress(parent, _args, _context, _info) {<br \/>\n&#8211; \u8fd4\u56de10;<br \/>\n+ \u8fd4\u56de&#8221;jason.summerwinter@@@@gmail.com&#8221;;<br \/>\n}<\/p>\n<\/details>\n<p>\u8fd9\u91cc\u65e0\u6cd5\u5728 TypeScript \u7684\u7c7b\u578b\u68c0\u67e5\u4e2d\u68c0\u6d4b\u5230\u9519\u8bef\uff0c\u53ea\u80fd\u5728\u8fd0\u884c\u65f6\u9519\u8bef\u4e2d\u68c0\u6d4b\u5230\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/59-0.png\" alt=\"2022-08-08_00h28_44.png\" \/><\/div>\n<div>\u8981\u60f3\u5728 TypeScript \u7684\u9759\u6001\u7c7b\u578b\u68c0\u67e5\u4e2d\uff0c\u5c06\u4e0d\u80fd\u8f6c\u6362\u4e3a EmailAddress \u5f62\u5f0f\u7684 string \u4f5c\u4e3a\u9519\u8bef\u68c0\u6d4b\uff0c\u9700\u8981\u4f7f\u7528\u6b64\u6559\u7a0b\u4e2d\u4ecb\u7ecd\u7684\u7b2c5\u548c\u7b2c6\u90e8\u5206\u7684\u6280\u5de7\uff0c\u4f7f\u7528\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u5b9a\u4e49\u3002<\/div>\n<p>\u65e2\u7136\u6211\u4eec\u5df2\u7ecf\u4e86\u89e3\u4e86\u4ec5\u4f7f\u7528 graphql-scalars \u63d0\u4f9b\u7684\u529f\u80fd\u8fdb\u884c\u7c7b\u578b\u68c0\u67e5\u7684\u64cd\u4f5c\uff0c\u90a3\u4e48\u6211\u4eec\u5c06\u628a emailAddress \u6062\u590d\u4e3a\u4ece Query.json \u6587\u4ef6\u4e2d\u83b7\u53d6\u503c\u7684\u5f62\u5f0f\u3002<\/p>\n<p>\u8bf7\u952e\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/8dcf32c.patch <span class=\"c\"># revert the emailAddress back to parent.emailAddress<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684index.ts\u662f\uff1aserver\/src\/index.ts<br \/>\nemailAddress\uff08parent\uff0c_args\uff0c_context\uff0c_info\uff09{<br \/>\n&#8211; \u8fd4\u56de\u201cjason.summerwinnter@@@@gmail.com\u201d\uff1b<br \/>\n+ \u8fd4\u56de10\uff1b<br \/>\n}<\/p>\n<\/details>\n<p>\u5728\u8fd9\u91cc\uff0c\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528\u9664\u4e86EmailAddress\u4e4b\u5916\u7684\u81ea\u5b9a\u4e49\u6807\u91cf\u3002<\/p>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/59c46fb.patch <span class=\"c\"># many custom scalars<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u5c06\u66f4\u65b0 Query.json\u3002\u670d\u52a1\u5668\/\u6570\u636e\/Query.json<br \/>\n{<br \/>\n&#8220;me&#8221;: {<br \/>\n&#8220;name&#8221;: &#8220;Jason Summerwinter&#8221;,<br \/>\n&#8220;birthDate&#8221;: &#8220;1992-12-03T10:15:30Z&#8221;,<br \/>\n&#8220;ageInYears&#8221;: 30,<br \/>\n&#8220;heightInInches&#8221;: 180,<br \/>\n&#8220;minimumHourlyRate&#8221;: 3000,<br \/>\n&#8220;currentlyActiveProjects&#8221;: 3,<br \/>\n&#8220;emailAddress&#8221;: &#8220;jason.summerwinter@gmail.com&#8221;,<br \/>\n&#8220;homePage&#8221;: &#8220;https:\/\/json.summer.winter.com&#8221;,<br \/>\n&#8220;phoneNumber&#8221;: &#8220;+12312345678&#8221;,<br \/>\n&#8220;homePostalCode&#8221;: &#8220;010-0000&#8221;<br \/>\n}<br \/>\n}<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u5c06\u66f4\u65b0 schema.gqlserver\/schema.gql<br \/>\n+ \u6807\u91cf\u7c7b\u578b DateTime<br \/>\n+ \u6807\u91cf\u7c7b\u578b PositiveInt<br \/>\n+ \u6807\u91cf\u7c7b\u578b PositiveFloat<br \/>\n+ \u6807\u91cf\u7c7b\u578b NonNegativeFloat<br \/>\n+ \u6807\u91cf\u7c7b\u578b NonNegativeInt<br \/>\n+ \u6807\u91cf\u7c7b\u578b EmailAddress<br \/>\n+ \u6807\u91cf\u7c7b\u578b URL<br \/>\n+ \u6807\u91cf\u7c7b\u578b PhoneNumber<br \/>\n+ \u6807\u91cf\u7c7b\u578b PostalCode<\/p>\n<p>\u7c7b\u578b Person {<br \/>\n&#8211; \u90ae\u7bb1\u5730\u5740: EmailAddress<br \/>\n\u59d3\u540d: String<br \/>\n+ \u51fa\u751f\u65e5\u671f: DateTime<br \/>\n+ \u5e74\u9f84: PositiveInt<br \/>\n+ \u8eab\u9ad8: PositiveFloat<br \/>\n+ \u6700\u4f4e\u5c0f\u65f6\u8d39\u7387: NonNegativeFloat<br \/>\n+ \u5f53\u524d\u8fdb\u884c\u9879\u76ee\u6570: NonNegativeInt<br \/>\n+ \u7535\u5b50\u90ae\u7bb1\u5730\u5740: EmailAddress<br \/>\n+ \u4e3b\u9875: URL<br \/>\n+ \u7535\u8bdd\u53f7\u7801: PhoneNumber<br \/>\n+ \u5bb6\u5ead\u90ae\u653f\u7f16\u7801: PostalCode<br \/>\n}<\/p>\n<p>\u7c7b\u578b Query {<br \/>\n\u6211: Person<br \/>\n}<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u4f1a\u66f4\u65b0index.ts\u6587\u4ef6\u3002server\/src\/index.ts<br \/>\nimport { ApolloServer, gql } from &#8220;apollo-server&#8221;;<br \/>\nimport * as fs from &#8220;fs&#8221;;<br \/>\nimport { EmailAddressResolver } from &#8220;graphql-scalars&#8221;; \/\/ \u5bfc\u5165EmailAddressResolver<br \/>\nimport {<br \/>\nDateTimeResolver,<br \/>\nEmailAddressResolver,<br \/>\nNonNegativeFloatResolver,<br \/>\nNonNegativeIntResolver,<br \/>\nPhoneNumberResolver,<br \/>\nPositiveFloatResolver,<br \/>\nPositiveIntResolver,<br \/>\nPostalCodeResolver,<br \/>\nURLResolver,<br \/>\n} from &#8220;graphql-scalars&#8221;; \/\/ \u5bfc\u5165\u5176\u4ed6\u89e3\u6790\u5668<br \/>\nimport { Query, Resolvers } from &#8220;.\/generated\/graphql&#8221;;<\/p>\n<p>const typeDefs = gql`<br \/>\n\/\/ \u7c7b\u578b\u5b9a\u4e49\u90e8\u5206\u7565<\/p>\n<p>const resolvers: Resolvers = {<br \/>\n\/\/ \u89e3\u6790\u5668\u90e8\u5206\u7565<br \/>\n};<\/p>\n<p>\/\/ \u5bfc\u51fa\u89e3\u6790\u5668\u90e8\u5206\u7565<\/p>\n<\/details>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/71-0.png\" alt=\"2022-08-08_00h37_18.png\" \/><\/div>\n<p>\u901a\u8fc7\u4e0a\u8ff0\u65b9\u5f0f\uff0c\u6211\u4eec\u5df2\u7ecf\u77e5\u9053\u5982\u4f55\u4f7f\u7528\u591a\u4e2a\u81ea\u5b9a\u4e49\u6807\u91cf\uff0c\u56e0\u6b64\u8ba9\u6211\u4eec\u5c06\u6e90\u4ee3\u7801\u6062\u590d\u4e3a\u539f\u59cb\u72b6\u6001\u3002<\/p>\n<p>\u52a8\u4f5c\uff1a\u8bf7\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/15071a8.patch <span class=\"c\"># Revert \"many custom scalars\"<\/span>\r\n<\/code><\/pre>\n<h2>5. \u5bf9\u4f7f\u7528 graphql-scalars \u4f5c\u4e3a\u53c2\u6570\u7c7b\u578b\u7684\u884c\u4e3a\u8fdb\u884c\u9a8c\u8bc1<\/h2>\n<p>\u8fc4\u4eca\u4e3a\u6b62\uff0c\u6211\u4eec\u5df2\u7ecf\u8ba8\u8bba\u4e86\u5982\u4f55\u5728\u5b57\u6bb5\u7c7b\u578b\u4e2d\u4f7f\u7528\u81ea\u5b9a\u4e49\u6807\u91cf\u7c7b\u578b\uff0c\u73b0\u5728\u8ba9\u6211\u4eec\u6765\u770b\u770b\u53c2\u6570\u7c7b\u578b\u7684\u60c5\u51b5\u3002\u6211\u4eec\u5c06\u6dfb\u52a0\u4e00\u4e2a\u540d\u4e3asearch\u7684\u5b57\u6bb5\uff0c\u5e76\u5728\u8be5\u53c2\u6570\u4e2d\u4f7f\u7528\u81ea\u5b9a\u4e49\u6807\u91cf\u7c7b\u578bCountryCode\u3002<\/p>\n<p>\u8bf7\u60a8\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/b1acf0c.patch <span class=\"c\"># add CountryCode to schema.gql<\/span>\r\ngit apply patches\/09bc748.patch <span class=\"c\"># add country to index.ts<\/span>\r\ngit apply patches\/6c02fe8.patch <span class=\"c\"># update data\/Query.json<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u4f1a\u66f4\u65b0 schema.gql \u6587\u4ef6server\/schema.gql<br \/>\n\u6807\u91cf EmailAddress<br \/>\n+ \u6807\u91cf CountryCode<\/p>\n<p>\u7c7b\u578b Person {<br \/>\n\u90ae\u7bb1\u5730\u5740: EmailAddress<br \/>\n\u59d3\u540d: String<br \/>\n+ \u56fd\u5bb6: CountryCode<br \/>\n}<\/p>\n<p>\u7c7b\u578b Query {<br \/>\n\u6211: Person<br \/>\n+ \u641c\u7d22(\u56fd\u5bb6: CountryCode): [Person]<br \/>\n}<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684index.ts\u6587\u4ef6server\/src\/index.ts<br \/>\nimport { ApolloServer, gql } from &#8220;apollo-server&#8221;;<br \/>\nimport * as fs from &#8220;fs&#8221;;<br \/>\n&#8211; import { EmailAddressResolver } from &#8220;graphql-scalars&#8221;;<br \/>\n+ import { CountryCodeResolver, EmailAddressResolver } from &#8220;graphql-scalars&#8221;;<br \/>\nimport { Query, Resolvers } from &#8220;.\/generated\/graphql&#8221;;<\/p>\n<p>const typeDefs = gql`<br \/>\n@@ -16,6 +16,9 @@ const resolvers: Resolvers = {<br \/>\nme(_parent, _args, context, _info) {<br \/>\nreturn context.Query.me;<br \/>\n},<br \/>\n+ search(_parent, _args, context, _info) {<br \/>\n+ return context.Query.search;<br \/>\n+ },<br \/>\n},<br \/>\nPerson: {<br \/>\nname(parent, _args, _context, _info) {<br \/>\n@@ -24,8 +27,12 @@ const resolvers: Resolvers = {<br \/>\nemailAddress(parent, _args, _context, _info) {<br \/>\nreturn parent.emailAddress;<br \/>\n},<br \/>\n+ country(parent, _args, _context, _info) {<br \/>\n+ return parent.country;<br \/>\n+ },<br \/>\n},<br \/>\nEmailAddress: EmailAddressResolver,<br \/>\n+ CountryCode: CountryCodeResolver,<br \/>\n};<\/p>\n<p>const readJsonFile = async (relativeFileName: string): Promise =&gt; {<br \/>\n&#8230;<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684Query.json\u6587\u4ef6\u670d\u52a1\u5668\/\u6570\u636e\/Query.json<br \/>\n{<br \/>\n&#8220;me&#8221;: {<br \/>\n&#8220;emailAddress&#8221;: &#8220;jason.summerwinnter@gmail.com&#8221;,<br \/>\n&#8211; &#8220;name&#8221;: &#8220;Jason Summerwinter&#8221;<br \/>\n&#8211; }<br \/>\n+ &#8220;name&#8221;: &#8220;Jason Summerwinter&#8221;,<br \/>\n+ &#8220;country&#8221;: &#8220;JP&#8221;<br \/>\n+ },<br \/>\n+ &#8220;search&#8221;: [<br \/>\n+ {<br \/>\n+ &#8220;emailAddress&#8221;: &#8220;jason.fallspring@gmail.com&#8221;,<br \/>\n+ &#8220;name&#8221;: &#8220;Jason FallSpring&#8221;,<br \/>\n+ &#8220;country&#8221;: &#8220;JP&#8221;<br \/>\n+ },<br \/>\n+ {<br \/>\n+ &#8220;emailAddress&#8221;: &#8220;kate.heartspadediamond@gmail.com&#8221;,<br \/>\n+ &#8220;name&#8221;: &#8220;Kate HeartSpadeDiamond&#8221;,<br \/>\n+ &#8220;country&#8221;: &#8220;JP&#8221;<br \/>\n+ },<br \/>\n+ {<br \/>\n+ &#8220;emailAddress&#8221;: &#8220;yosuke.kishidamax@gmail.com&#8221;,<br \/>\n+ &#8220;name&#8221;: &#8220;Yosuke KishidaMax&#8221;,<br \/>\n+ &#8220;country&#8221;: &#8220;JP&#8221;<br \/>\n+ },<br \/>\n+ {<br \/>\n+ &#8220;emailAddress&#8221;: &#8220;bob.BobbDobb@gmail.com&#8221;,<br \/>\n+ &#8220;name&#8221;: &#8220;Bob BobbDobb&#8221;,<br \/>\n+ &#8220;country&#8221;: &#8220;JP&#8221;<br \/>\n+ }<br \/>\n+ ]<br \/>\n}<\/p>\n<\/details>\n<p>\u884c\u52a8\uff1a\u8bf7\u901a\u8fc7Apollo Studio Explorer\u6267\u884c\u67e5\u8be2\u5e76\u786e\u8ba4\u64cd\u4f5c\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/83-0.png\" alt=\"2022-08-09_06h00_03.png\" \/><\/div>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/84-0.png\" alt=\"image.png\" \/><\/div>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/85-0.png\" alt=\"2022-08-09_06h07_46.png\" \/><\/div>\n<p>\u5728 Apollo Studio Explorer \u7684\u67e5\u8be2\u7f16\u8f91\u5668\u4e2d\uff0c\u9759\u6001\u7c7b\u578b\u68c0\u67e5\u9519\u8bef\u4e0d\u8d77\u4f5c\u7528\u3002\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 argument \u4e2d\u7684\u81ea\u5b9a\u4e49\u6807\u91cf\u6765\u786e\u8ba4\u8fd9\u79cd\u884c\u4e3a\u3002<\/p>\n<h2>\uff08\u53ef\u9009\uff09\u4f7f\u7528TypeScript\u7684\u9759\u6001\u7c7b\u578b\u68c0\u67e5\u6765\u68c0\u6d4b\u65e0\u6cd5\u5c06\u5b57\u7b26\u4e32\u8f6c\u6362\u4e3aEmailAddress\u7684\u683c\u5f0f\u9519\u8bef\u3002<\/h2>\n<p>\u5728\u672c\u6559\u7a0b\u201c\u9a8c\u8bc1\u4f7f\u7528 graphql-scalars \u4f5c\u4e3a\u5b57\u6bb5\u7c7b\u578b\u65f6\u7684\u64cd\u4f5c\u201d\u7684\u6700\u540e\uff0c\u6211\u4eec\u4ee5\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u4e86\u8bb0\u5f55\u3002<\/p>\n<div>\u8981\u4f7f\u7528TypeScript\u7684\u9759\u6001\u7c7b\u578b\u68c0\u67e5\u6765\u68c0\u6d4b\u4e0d\u80fd\u8f6c\u6362\u4e3aEmailAddress\u7684\u5b57\u7b26\u4e32\u683c\u5f0f\u9519\u8bef\uff0c\u9700\u8981\u4f7f\u7528\u672c\u6559\u7a0b\u4e2d\u4ecb\u7ecd\u7684\u7b2c5\u70b9\u548c\u7b2c6\u70b9\u7684\u81ea\u5b9a\u4e49\u7c7b\u578b\u5b9a\u4e49\u6280\u5de7\u3002<\/div>\n<p>\u4ece\u8fd9\u91cc\u5f00\u59cb\uff0c\u6211\u4eec\u5c06\u5b9e\u9645\u89c2\u5bdf\u8fd9\u9879\u6280\u672f\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c\u5728\u521b\u5efa\u4ee5\u4e0b\u6b65\u9aa4\u65f6\uff0c\u6211\u53c2\u8003\u4e86 Wantedly Engineer Blog &#8211; graphql-codegen \u548c Nominal Typing(Branded Type) \u6765\u5c06\u81ea\u5b9a\u4e49\u6807\u91cf\u4f18\u5316\u5f97\u66f4\u597d\u4e00\u4e9b\u3002<\/p>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u6307\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/2aa8329.patch <span class=\"c\"># EmailAddressString type<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c: \u4e0a\u9762\u7684\u547d\u4ee4\u4f1a\u751f\u6210src\/myTypes.ts\u6587\u4ef6\uff0c\u5176\u4e2dstr\u88ab\u5b9a\u4e49\u4e3aEmailAddressString\uff0c\u8fd9\u662fTypeScript\u7684\u7c7b\u578b\u5224\u65ad\u3002src\/myTypes.ts<br \/>\n\u5bfc\u51fa\u7c7b\u578bEmailAddressString = \u5b57\u7b26\u4e32 &amp; { __type: &#8220;EmailAddressString&#8221; };<\/p>\n<p>\u5bfc\u51fa\u51fd\u6570isEmailAddressString = (<br \/>\nstr: \u5b57\u7b26\u4e32<br \/>\n): str is EmailAddressString =&gt; {<br \/>\nconst EMAIL_ADDRESS_REGEX =<br \/>\n\/^[a-zA-Z0-9.!#$%&amp;&#8217;*+\\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$\/;<\/p>\n<p>\u8fd4\u56de EMAIL_ADDRESS_REGEX.test(str);<br \/>\n};<\/p>\n<\/details>\n<p>\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u5728graphql.ts\u6587\u4ef6\u4e2d\u8fdb\u884c\u8bbe\u7f6e\uff0c\u4ee5\u5bfc\u5165\u5df2\u5b9a\u4e49\u7684EmailAddressString\u7c7b\u578b\u3002\u7531\u4e8egraphql.ts\u662f\u7531GraphQL Codegen\u81ea\u52a8\u751f\u6210\u7684\uff0c\u6240\u4ee5\u9700\u8981\u7a0d\u4f5c\u4fee\u6539\u3002<\/p>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> @graphql-codegen\/add\r\ngit apply patches\/e6f57b6.patch <span class=\"c\"># Use EmailAddressString in codegen.yml<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4ee5\u4e0a\u547d\u4ee4\u66f4\u65b0\u7684config.ymlconfig.yml<br \/>\n\u63d2\u4ef6:<br \/>\n&#8211; &#8220;typescript&#8221;<br \/>\n&#8211; &#8220;typescript-resolvers&#8221;<br \/>\n+ &#8211; &#8220;add&#8221;:<br \/>\n+ \u5185\u5bb9: &#8220;import * as myTypes from &#8216;..\/myTypes'&#8221;<br \/>\n\u914d\u7f6e:<br \/>\n\u907f\u514d\u9009\u9879: true<br \/>\n\u6807\u91cf:<br \/>\n&#8211; \u90ae\u7bb1\u5730\u5740: string<br \/>\n+ \u90ae\u7bb1\u5730\u5740: myTypes.EmailAddressString<br \/>\n\u94a9\u5b50:<br \/>\n\u5728\u4e00\u4e2a\u6587\u4ef6\u5199\u5165\u540e:<br \/>\n&#8211; npx prettier &#8211;write<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1a\u6839\u636econfig.yml\u81ea\u52a8\u66f4\u65b0\u7684graphql.tsserver\/src\/generated\/graphql.ts<br \/>\n+import * as myTypes from &#8220;..\/myTypes&#8221;;<br \/>\nexport type Maybe = T | null;<br \/>\nexport type InputMaybe = Maybe;<br \/>\nexport type Exact = {<br \/>\n@@ -25,7 +26,7 @@ export type Scalars = {<br \/>\nInt: number;<br \/>\nFloat: number;<br \/>\nCountryCode: any;<br \/>\n&#8211; EmailAddress: string;<br \/>\n+ EmailAddress: myTypes.EmailAddressString;<br \/>\n};<\/p>\n<\/details>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/fdf1ea5.patch <span class=\"c\"># emailAddress does not allow plain string<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u5c06\u66f4\u65b0index.ts\u6587\u4ef6server\/src\/index.ts<br \/>\n\u8fd4\u56deparent.name;<br \/>\n},<br \/>\nemailAddress(parent, _args, _context, _info) {<br \/>\n\u8fd4\u56de&#8221;jason.summerwinnter@gmail.com&#8221;;<br \/>\n},<br \/>\ncountry(parent, _args, _context, _info) {<br \/>\n\u8fd4\u56deparent.country;<\/p>\n<\/details>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/102-0.png\" alt=\"2022-08-09_06h26_31.png\" \/><\/div>\n<p>\u90a3\u4e48\u8ba9\u6211\u4eec\u6765\u89e3\u51b3\u7c7b\u578b\u68c0\u67e5\u9519\u8bef\u5427\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/8b4740d.patch <span class=\"c\"># explicit type checking by type predicates<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u5728\u4e0a\u8ff0\u547d\u4ee4\u4e2d\u66f4\u65b0\u7684index.ts\u6587\u4ef6<br \/>\n\u901a\u8fc7\u4ee5\u4e0b\u66f4\u6539\uff0c\u660e\u786e\u8c03\u7528isEmailAddress\u51fd\u6570\u6765\u68c0\u67e5\u5b57\u7b26\u4e32\u4e0d\u4ec5\u4ec5\u662f\u666e\u901a\u5b57\u7b26\u4e32\uff0c\u800c\u662fEmailAddressString\u3002server\/src\/index.ts<br \/>\nemailAddress(parent, _args, _context, _info) {<br \/>\n&#8211; return &#8220;jason.summerwinnter@gmail.com&#8221;;<br \/>\n+ const email = &#8220;jason.summerwinnter@gmail.com&#8221;;<br \/>\n+ if (isEmailAddressString(email)) {<br \/>\n+ return email;<br \/>\n+ } else {<br \/>\n+ throw new Error(<br \/>\n+ &#8220;\u53d1\u751f\u4e86\u5185\u90e8\u9519\u8bef\uff1a\u65e0\u6cd5\u68c0\u7d22\u7535\u5b50\u90ae\u4ef6\u5730\u5740&#8221;<br \/>\n+ );<br \/>\n+ }<br \/>\n},<\/p>\n<p>\u7531\u4e8e\u4f7f\u7528\u4e86throw new Error\uff0c\u53ef\u80fd\u4f1a\u8ba4\u4e3a\u6700\u7ec8\u53ea\u4f1a\u5bfc\u81f4\u8fd0\u884c\u65f6\u9519\u8bef\uff0c\u4f46\u91cd\u70b9\u5728\u4e8e\u5fc5\u987b\u5f3a\u5236\u8c03\u7528\u300cisEmailAddressString\u300d\uff0c\u7a0b\u5e8f\u5458\u9700\u8981\u4e8b\u5148\u8003\u8651\u5728\u6e90\u4ee3\u7801\u7684\u54ea\u4e2a\u90e8\u5206\u8fdb\u884c\u7c7b\u578b\u68c0\u67e5\uff0c\u5e76\u660e\u786e\u5730\u8fdb\u884c\u4e66\u5199\u3002<\/p>\n<\/details>\n<p>\u901a\u8fc7\u8fd9\u6837\u505a\uff0c\u6211\u73b0\u5728\u53ef\u4ee5\u5229\u7528TypeScript\u7684\u7c7b\u578b\u68c0\u67e5\u6765\u9a8c\u8bc1\u7535\u5b50\u90ae\u4ef6\u5730\u5740\u7684\u683c\u5f0f\u4e86\uff01<\/p>\n<div>\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u8c03\u7528\u201cisEmailAddressString\u51fd\u6570\u201d\u6765\u901a\u8fc7\u9759\u6001\u7c7b\u578b\u68c0\u67e5\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u60a8\u4e0d\u4f1a\u5728\u5c06\u610f\u5916\u503c\u4f20\u9012\u7ed9GraphQL\u81ea\u5b9a\u4e49\u6807\u91cf\u7684\u9a8c\u8bc1\u5668\u540e\u624d\u610f\u8bc6\u5230\u9519\u8bef\uff0c\u800c\u662f\u5728\u8c03\u7528isEmailAddressString\u51fd\u6570\u4e4b\u524d\u63d0\u524d\u5224\u65ad\u3002<\/div>\n<p>\u8ba9\u6211\u4eec\u5047\u8bbe\u5728\u4ece\u6570\u636e\u5e93\u4e2d\u8c03\u7528\u7684\u90e8\u5206\u9644\u8fd1\u8c03\u7528isEmailAddressString\u51fd\u6570\uff0c\u5e76\u66f4\u65b0\u4ee3\u7801\u3002<\/p>\n<p>\u52a8\u4f5c\uff1a\u8bf7\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/d065fdd.patch <span class=\"c\"># email is validated near the database<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684index.tsserver\/src\/index.ts<br \/>\nconst loadEmailDeepInsideServer = (): EmailAddressString =&gt; {<br \/>\n\/\/ \u5728\u670d\u52a1\u5668\u7aef\u7684\u67d0\u4e2a\u5730\u65b9\uff0c\u6bd4\u5982\u6570\u636e\u5e93\u6df1\u5904&#8230;<br \/>\nconst valueFromDatabase = &#8220;jason.summerwinnter@gmail.com&#8221;;<br \/>\nif (isEmailAddressString(valueFromDatabase)) {<br \/>\nreturn valueFromDatabase;<br \/>\n} else {<br \/>\nthrow new TypeError(<br \/>\n`\u6570\u636e\u5e93\u4e2d\u7684\u503c = ${valueFromDatabase} \u4e0d\u662f\u6709\u6548\u7684\u7535\u5b50\u90ae\u4ef6\u5730\u5740`<br \/>\n);<br \/>\n}<br \/>\n};<\/p>\n<p>interface LoadingDataContext {<br \/>\nQuery: Query;<br \/>\n}<\/p>\n<p>const resolvers: Resolvers = {<br \/>\nname(parent, _args, _context, _info) {<br \/>\nreturn parent.name;<br \/>\n},<br \/>\nemailAddress(_parent, _args, _context, _info) {<br \/>\ntry {<br \/>\nconst email = loadEmailDeepInsideServer();<br \/>\nreturn email;<br \/>\n} catch (error) {<br \/>\n\/\/ \u4ec5\u670d\u52a1\u5668\u65e5\u5fd7\u4f7f\u7528\uff0c\u4e0d\u5411API\u8c03\u7528\u8005\u516c\u5f00\u5185\u90e8\u9519\u8bef\u8be6\u7ec6\u4fe1\u606f<br \/>\nconsole.log(error);<br \/>\nthrow new Error(<br \/>\n&#8220;\u53d1\u751f\u5185\u90e8\u9519\u8bef\uff1a\u65e0\u6cd5\u68c0\u7d22\u7535\u5b50\u90ae\u4ef6\u5730\u5740&#8221;<br \/>\n);<br \/>\n}<br \/>\n}<br \/>\n};<\/p>\n<\/details>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/80dda3e.patch <span class=\"c\"># wrong format email address<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684 index.tsserver\/src\/index.ts<br \/>\nconst loadEmailDeepInsideServer = (): EmailAddressString =&gt; {<br \/>\n\/\/ \u5728\u670d\u52a1\u5668\u5185\u90e8\u7684\u67d0\u5904\uff0c\u6bd4\u5982\u6570\u636e\u5e93&#8230;<br \/>\nconst valueFromDatabase = &#8220;jason.summerwinnter@@@@gmail.com&#8221;;<br \/>\nif (isEmailAddressString(valueFromDatabase)) {<br \/>\nreturn valueFromDatabase;<br \/>\n} else {<\/p>\n<\/details>\n<p>\u8bf7\u5728Apollo Studio Explorer\u4e2d\u6267\u884c\u67e5\u8be2\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/116-0.png\" alt=\"2022-08-09_06h48_09.png\" \/><\/div>\n<pre class=\"post-pre\"><code>git apply patches\/749a10a.patch <span class=\"c\"># correct email format<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c: \u4f7f\u7528\u4e0a\u8ff0\u547d\u4ee4\u66f4\u65b0\u7684 index.tsserver\/src\/index.ts<br \/>\nconst loadEmailDeepInsideServer = (): EmailAddressString =&gt; {<br \/>\n\/\/ \u5728\u670d\u52a1\u5668\u5185\u90e8\u6df1\u5904\uff0c\u6bd4\u5982\u6570\u636e\u5e93&#8230;<br \/>\n&#8211; const valueFromDatabase = &#8220;jason.summerwinnter@@@@gmail.com&#8221;;<br \/>\n+ const valueFromDatabase = &#8220;jason.summerwinnter@gmail.com&#8221;;<br \/>\nif (isEmailAddressString(valueFromDatabase)) {<br \/>\nreturn valueFromDatabase;<br \/>\n} else {<\/p>\n<\/details>\n<p>\u6700\u540e\uff0c\u8ba9\u6211\u4eec\u6839\u636e\u4e4b\u524d\u57285.\u4e2d\u6240\u505a\u7684\u66f4\u6539\u6062\u590d\u5230\u6700\u521d\u72b6\u6001\u3002<\/p>\n<p>\u884c\u52a8\uff1a\u8bf7\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/6d06b65.patch <span class=\"c\"># revert back index.ts<\/span>\r\n<\/code><\/pre>\n<h2>6.\uff08\u53ef\u9009\uff09\u5728 TypeScript \u4e2d\u4e3a GraphQL \u7684\u53c2\u6570\u4f7f\u7528\u81ea\u5b9a\u4e49\u7c7b\u578b<\/h2>\n<p>\u8ba9\u6211\u4eec\u4e3aGraphQL\u7684\u53c2\u6570\u7c7b\u578b\u5b9a\u4e49\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684TypeScript\u7c7b\u578b\uff0c\u4e4b\u524d\u6211\u4eec\u5df2\u7ecf\u4e3aGraphQL\u7684\u5b57\u6bb5\u7c7b\u578b\u5b9a\u4e49\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684TypeScript\u7c7b\u578b\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/e1814cb.patch <span class=\"c\"># CoutryString type<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u5c06\u66f4\u65b0myTypes.tsserver\/src\/myTypes.ts<br \/>\n+\u5bfc\u51fa\u7c7b\u578b CountryString = string &amp; { __type: &#8220;CountryString&#8221; };<br \/>\n+<br \/>\n+\u5bfc\u51fa\u51fd\u6570 isCountryString = (str: string): str is CountryString =&gt; {<br \/>\n+ const COUNTRY_CODE_REGEX =<br \/>\n+ \/^(AD|AE|AF|AG|AI|AL|AM|AO|AQ|AR|AS|AT|AU|AW|AX|AZ|BA|BB|BD|BE|BF|BG|BH|BI|BJ|BL|BM|BN|BO|BQ|BR|BS|BT|BV|BW|BY|BZ|CA|CC|CD|CF|CG|CH|CI|CK|CL|CM|CN|CO|CR|CU|CV|CW|CX|CY|CZ|DE|DJ|DK|DM|DO|DZ|EC|EE|EG|EH|ER|ES|ET|FI|FJ|FK|FM|FO|FR|GA|GB|GD|GE|GF|GG|GH|GI|GL|GM|GN|GP|GQ|GR|GS|GT|GU|GW|GY|HK|HM|HN|HR|HT|HU|ID|IE|IL|IM|IN|IO|IQ|IR|IS|IT|JE|JM|JO|JP|KE|KG|KH|KI|KM|KN|KP|KR|KW|KY|KZ|LA|LB|LC|LI|LK|LR|LS|LT|LU|LV|LY|MA|MC|MD|ME|MF|MG|MH|MK|ML|MM|MN|MO|MP|MQ|MR|MS|MT|MU|MV|MW|MX|MY|MZ|NA|NC|NE|NF|NG|NI|NL|NO|NP|NR|NU|NZ|OM|PA|PE|PF|PG|PH|PK|PL|PM|PN|PR|PS|PT|PW|PY|QA|RE|RO|RS|RU|RW|SA|SB|SC|SD|SE|SG|SH|SI|SJ|SK|SL|SM|SN|SO|SR|SS|ST|SV|SX|SY|SZ|TC|TD|TF|TG|TH|TJ|TK|TL|TM|TN|TO|TR|TT|TV|TW|TZ|UA|UG|UM|US|UY|UZ|VA|VC|VE|VG|VI|VN|VU|WF|WS|YE|YT|ZA|ZM|ZW)$\/i;<br \/>\n+<br \/>\n+ \u8fd4\u56de COUNTRY_CODE_REGEX.test(str);<br \/>\n+};<\/p>\n<\/details>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/10f274d.patch <span class=\"c\"># use CountryString in generated code<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u901a\u8fc7\u4ee5\u4e0a\u547d\u4ee4\u66f4\u65b0\u7684 config.yml \u4e2d\u7684\u5185\u5bb9server\/codegen.yml<br \/>\n\u907f\u514d\u4f7f\u7528\u53ef\u9009\u9879: true<br \/>\n\u6807\u91cf:<br \/>\n\u7535\u5b50\u90ae\u4ef6\u5730\u5740: myTypes.EmailAddressString<br \/>\n+ \u56fd\u5bb6\u4ee3\u7801: myTypes.CountryString<br \/>\n\u94a9\u5b50:<br \/>\n\u5728\u6bcf\u6b21\u6587\u4ef6\u5199\u5165\u540e:<br \/>\n&#8211; npx prettier &#8211;write<\/p>\n<\/details>\n<details>\u7ed3\u679c\uff1aconfig.yml\u4f1a\u81ea\u52a8\u751f\u6210graphql.tsserver\/src\/generated\/graphql.ts<br \/>\nBoolean: boolean;<br \/>\nInt: number;<br \/>\nFloat: number;<br \/>\n&#8211; CountryCode: any;<br \/>\n+ CountryCode: myTypes.CountryString;<br \/>\nEmailAddress: myTypes.EmailAddressString;<br \/>\n};<\/p>\n<\/details>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/d224c5e.patch <span class=\"c\"># args.country is typed as CountryString<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u5728\u4e0a\u8ff0\u547d\u4ee4\u4e2d\u66f4\u65b0\u7684index.tsserver\/src\/index.ts<br \/>\nme\uff08_parent\uff0c_args\uff0ccontext\uff0c_info\uff09{<br \/>\n\u8fd4\u56decontext.Query.me;<br \/>\n},<br \/>\n&#8211; \u641c\u7d22\uff08_parent\uff0c_args\uff0ccontext\uff0c_info\uff09{<br \/>\n+ \u641c\u7d22\uff08_parent\uff0cargs\uff0ccontext\uff0c_info\uff09{<br \/>\n+ const countryString = args.country;<br \/>\n+ console.log\uff08countryString\uff09;<br \/>\n\u8fd4\u56decontext.Query.search;<br \/>\n},<br \/>\n},<\/p>\n<\/details>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/133-0.png\" alt=\"2022-08-10_04h35_54.png\" \/><\/div>\n<p>\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u5047\u8bbe\u5728\u670d\u52a1\u5668\u7aef\u903b\u8f91\u7684\u6df1\u5c42\u4e2d\u4f1a\u4f7f\u7528\u8fd9\u4e2a CountryString \u7c7b\u578b\uff0c\u8ba9\u6211\u4eec\u5c1d\u8bd5\u91cd\u65b0\u7f16\u5199\u4ee3\u7801\u3002<\/p>\n<p>\u8bf7\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>git apply patches\/06d0d6c.patch <span class=\"c\"># process args.country inside search<\/span>\r\n<\/code><\/pre>\n<details>\u7ed3\u679c\uff1a\u4e0a\u8ff0\u547d\u4ee4\u5c06\u66f4\u65b0index.ts\u6587\u4ef6\u3002server\/src\/index.ts<\/p>\n<p>import { CountryString } from &#8220;.\/myTypes&#8221;;<\/p>\n<p>const typeDefs = gql`<br \/>\n${fs.readFileSync(__dirname.concat(&#8220;\/..\/schema.gql&#8221;), &#8220;utf8&#8221;)}<br \/>\n`;<\/p>\n<p>\/\/ \u5904\u7406 &#8216;country&#8217; \u53d8\u91cf\uff0c\u786e\u4fdd\u5b83\u662f\u6709\u6548\u7684\u56fd\u5bb6\u4ee3\u7801<br \/>\nconst deepInsideServer\u5904\u7406\u56fd\u5bb6 = (country: CountryString) =&gt; {<br \/>\nconsole.log(country);<br \/>\n};<\/p>\n<p>interface LoadingDataContext {<br \/>\nQuery: Query;<br \/>\n}<\/p>\n<p>const resolvers: Resolvers = {<br \/>\n\/\/ \u7701\u7565\u5176\u4ed6\u4ee3\u7801<br \/>\nsearch(_parent, args, context, _info) {<br \/>\nconst countryString = args.country;<br \/>\ndeepInsideServer\u5904\u7406\u56fd\u5bb6(countryString);<br \/>\nreturn context.Query.search;<br \/>\n},<br \/>\n},<br \/>\n&#8220;`<\/p>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>\u9996\u5148 graphql-scalars\u662f\u4e00\u500bJavaScript\u5eab\uff0c\u6536\u96c6\u4e86GraphQL\u7684\u81ea\u5b9a\u7fa9\u6a19\u91cf\u3002\u5b83\u4e0d\u50c5\u53ef\u4ee5 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-47871","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 graphql-scalars\u662f\u4e00\u500bJavaScript\u5eab\uff0c\u6536\u96c6\u4e86GraphQL\u7684\u81ea\u5b9a\u7fa9\u6a19\u91cf\u3002\u5b83\u4e0d\u50c5\u53ef\u4ee5 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-17T13:08:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T10:34:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/12-0.png\" \/>\n<meta name=\"author\" content=\"\u97f5, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u97f5, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/\",\"name\":\"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-02-17T13:08:09+00:00\",\"dateModified\":\"2024-04-29T10:34:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\",\"name\":\"\u97f5, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"caption\":\"\u97f5, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b\/","og_locale":"zh_CN","og_type":"article","og_title":"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b","og_description":"\u9996\u5148 graphql-scalars\u662f\u4e00\u500bJavaScript\u5eab\uff0c\u6536\u96c6\u4e86GraphQL\u7684\u81ea\u5b9a\u7fa9\u6a19\u91cf\u3002\u5b83\u4e0d\u50c5\u53ef\u4ee5 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-02-17T13:08:09+00:00","article_modified_time":"2024-04-29T10:34:27+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d81b4913a08637a6add05\/12-0.png"}],"author":"\u97f5, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u97f5, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"9 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/","name":"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-02-17T13:08:09+00:00","dateModified":"2024-04-29T10:34:27+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u901a\u8fc7\u590d\u5236\u7c98\u8d34\u5b66\u4e60graphql-scalars\u6559\u7a0b"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e","name":"\u97f5, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","caption":"\u97f5, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%ad%a6%e4%b9%a0graphql-scalars%e6%95%99%e7%a8%8b\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=47871"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47871\/revisions"}],"predecessor-version":[{"id":86937,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47871\/revisions\/86937"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=47871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=47871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=47871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}