(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7938],{3251:function(s,e,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/guide/objects",function(){return a(1557)}])},1557:function(s,e,a){"use strict";a.r(e),a.d(e,{__N_SSG:function(){return r},frontmatter:function(){return i}});var n=a(5250),l=a(7160),c=a(3210),r=!0;let i={title:"Defining Objects Types in Pothos GraphQL",name:"Objects",menu:"Guide",description:"Guide for defining Object types in Pothos"},t=c.k;function h(s){let e=Object.assign({h1:"h1",p:"p",h3:"h3",pre:"pre",code:"code",span:"span",a:"a",h2:"h2",ol:"ol",li:"li"},(0,l.ah)(),s.components),{Alert:a}=e;return a||function(s,e){throw Error("Expected "+(e?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}("Alert",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{id:"object-types",children:"Object Types"}),"\n",(0,n.jsx)(e.p,{children:"This will walk you through creating your first object types, some concepts in this guide will be\nexplained further in later guides."}),"\n",(0,n.jsx)(e.h3,{id:"create-some-data",children:"Create some data"}),"\n",(0,n.jsx)(e.p,{children:"When adding a new type to your schema, you'll need to figure how the data behind this type will be\nrepresented. In this guide, we will use a class to represent some information about giraffes. Using\nclasses is completely optional, but it's a good place to start, since it makes it easy to show all\nthe different ways that you can tie the shape of your data to a new object type."}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"})," {\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"name"}),": ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"string"}),";\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"birthday"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),";\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"heightInMeters"}),": ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"number"}),";\n\n  ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"constructor"}),"(",(0,n.jsxs)(e.span,{className:"hljs-params",children:["name: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"string"}),", birthday: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"Date"}),", heightInMeters: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"number"})]}),") {\n    ",(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"name"})," = name;\n    ",(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"birthday"})," = birthday;\n    ",(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"heightInMeters"})," = heightInMeters;\n  }\n}\n"]})}),"\n",(0,n.jsx)(e.h3,{id:"define-the-type",children:"Define the type"}),"\n",(0,n.jsxs)(e.p,{children:["You can use ",(0,n.jsx)(e.code,{children:"builder.objectType"})," to add new ",(0,n.jsx)(e.code,{children:"Object"})," types to your schema."]}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," builder = ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"SchemaBuilder"}),"({});\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"objectType"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),", {\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"name"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Giraffe'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"description"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Long necks, cool patterns, taller than you.'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"fields"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({}),\n});\n"]})}),"\n",(0,n.jsxs)(e.p,{children:["The first argument is an ",(0,n.jsx)(e.code,{children:"ObjectParam"}),", in this case the class that represents our giraffes. This is\nused to convey type information about our underlying data, so that fields can know what properties\nare available on the parent object."]}),"\n",(0,n.jsx)(e.h3,{id:"add-some-fields",children:"Add some fields"}),"\n",(0,n.jsx)(e.p,{children:"Fields define what data is available in your schema"}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:["builder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"objectType"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),", {\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"name"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Giraffe'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"description"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Long necks, cool patterns, taller than you.'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"fields"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"name"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"exposeString"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'name'"}),", {}),\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"age"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"int"}),"({\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"resolve"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"parent"}),") =>"]})," {\n        ",(0,n.jsx)(e.span,{className:"hljs-comment",children:"// Do some date math to get an approximate age from a birthday"}),"\n        ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ageDifMs = ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"now"}),"() - parent.",(0,n.jsx)(e.span,{className:"hljs-property",children:"birthday"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"getTime"}),"();\n        ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ageDate = ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),"(ageDifMs); ",(0,n.jsx)(e.span,{className:"hljs-comment",children:"// milliseconds from epoch"}),"\n        ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Math"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"abs"}),"(ageDate.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"getUTCFullYear"}),"() - ",(0,n.jsx)(e.span,{className:"hljs-number",children:"1970"}),");\n      },\n    }),\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"height"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"float"}),"({\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"resolve"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"parent"}),") =>"]})," parent.",(0,n.jsx)(e.span,{className:"hljs-property",children:"heightInMeters"}),",\n    }),\n  }),\n});\n"]})}),"\n",(0,n.jsxs)(e.p,{children:["In Pothos we never automatically expose properties from the underlying data. Each property we want\nto add in our schema needs to be explicitly defined. The ",(0,n.jsx)(e.code,{children:"fields"})," property in the options object\nshould be a function that accepts one argument (a ",(0,n.jsx)(e.a,{href:"../api/field-builder",children:"FieldBuilder"}),") and returns\nan object whose keys are the field names, and whose values are ",(0,n.jsx)(e.code,{children:"FieldRefs"})," created by the\n",(0,n.jsx)(e.a,{href:"../api/field-builder",children:"FieldBuilder"}),". Fields are explained in more detail in the\n",(0,n.jsx)(e.a,{href:"./fields",children:"fields guide"}),"."]}),"\n",(0,n.jsx)(e.h2,{id:"add-a-query",children:"Add a query"}),"\n",(0,n.jsxs)(e.p,{children:["We can create a root ",(0,n.jsx)(e.code,{children:"Query"})," object with a field that returns a giraffe using ",(0,n.jsx)(e.code,{children:"builder.queryType"})]}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:["builder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"queryType"}),"({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"fields"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"giraffe"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"field"}),"({\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"type"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),",\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"resolve"}),": ",(0,n.jsx)(e.span,{className:"hljs-function",children:"() =>"})," ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'James'"}),", ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"UTC"}),"(",(0,n.jsx)(e.span,{className:"hljs-number",children:"2012"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"11"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"12"}),")), ",(0,n.jsx)(e.span,{className:"hljs-number",children:"5.2"}),"),\n    }),\n  }),\n});\n"]})}),"\n",(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"type"})," parameter can use whatever was used as the first argument of ",(0,n.jsx)(e.code,{children:"builder.objectType"}),", in\nthis case the Giraffe class. ",(0,n.jsx)(e.code,{children:"builder.objectType"})," also returns a ",(0,n.jsx)(e.code,{children:"Ref"})," object that can be used as a\n",(0,n.jsx)(e.code,{children:"TypeParam"}),"."]}),"\n",(0,n.jsx)(e.h3,{id:"create-a-server",children:"Create a server"}),"\n",(0,n.jsxs)(e.p,{children:["Pothos schemas build into a plain schema that uses types from the ",(0,n.jsx)(e.code,{children:"graphql"})," package. This means it\nshould be compatible with most of the popular GraphQL server implementations for node. In this guide\nwe will use ",(0,n.jsx)(e.code,{children:"graphql-yoga"})," but you can use whatever server you want."]}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"import"})," { createServer } ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'http'"}),";\n",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"import"})," { createYoga } ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'graphql-yoga'"}),";\n\n",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," yoga = ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"createYoga"}),"({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"schema"}),": builder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"toSchema"}),"(),\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"context"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"ctx"}),") =>"]})," ({\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"user"}),": { ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"id"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Number"}),".",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"parseInt"}),"(ctx.",(0,n.jsx)(e.span,{className:"hljs-property",children:"request"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"headers"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"get"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'x-user-id'"}),") ?? ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'1'"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"10"}),") },\n  }),\n});\n\n",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," server = ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"createServer"}),"(yoga);\n\nserver.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"listen"}),"(",(0,n.jsx)(e.span,{className:"hljs-number",children:"3000"}),");\n\n",(0,n.jsx)(e.span,{className:"hljs-comment",children:"// Build schema and start server with the types we wrote above"}),"\n",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," server = ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"createServer"}),"({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"schema"}),": builder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"toSchema"}),"(),\n});\n\nserver.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"start"}),"();\n"]})}),"\n",(0,n.jsx)(e.h3,{id:"query-your-data",children:"Query your data"}),"\n",(0,n.jsxs)(e.ol,{children:["\n",(0,n.jsxs)(e.li,{children:["Run your server (either with ",(0,n.jsx)(e.code,{children:"ts-node"}),") by compiling your code and running it with node."]}),"\n",(0,n.jsxs)(e.li,{children:["Open ",(0,n.jsx)(e.a,{href:"http://0.0.0.0:3000/graphql",children:"http://0.0.0.0:3000/graphql"})," to open the playground and query\nyour API:"]}),"\n"]}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-graphql",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"query"})," {\n  giraffe {\n    name\n    age\n    height\n  }\n}\n"]})}),"\n",(0,n.jsx)(e.h2,{id:"different-ways-to-define-object-types",children:"Different ways to define Object types"}),"\n",(0,n.jsx)(e.p,{children:"There are 3 different ways that you can provide type information to Pothos about what the underlying\ndata in your graph will be. Depending on how the rest of your application is structured you can pick\nthe approach that works best for you, or use a combination of different styles."}),"\n",(0,n.jsx)(e.h3,{id:"using-classes",children:"Using classes"}),"\n",(0,n.jsxs)(e.p,{children:["This is the approach used above. If your data is already represented as a class, this is a fairly\nstraight forward approach, since you can just use your existing classes anywhere that a ",(0,n.jsx)(e.code,{children:"TypeParam"}),"\nis expected."]}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," builder = ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"SchemaBuilder"}),"({});\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"objectType"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),", {\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"name"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Giraffe'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"description"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Long necks, cool patterns, taller than you.'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"fields"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({}),\n});\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"queryFields"}),"(",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"giraffe"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"field"}),"({\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"type"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),",\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"resolve"}),": ",(0,n.jsx)(e.span,{className:"hljs-function",children:"() =>"})," ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'James'"}),", ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"UTC"}),"(",(0,n.jsx)(e.span,{className:"hljs-number",children:"2012"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"11"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"12"}),")), ",(0,n.jsx)(e.span,{className:"hljs-number",children:"5.2"}),"),\n  }),\n}));\n"]})}),"\n",(0,n.jsx)(e.h3,{id:"using-schematypes",children:"Using SchemaTypes"}),"\n",(0,n.jsxs)(e.p,{children:["You can provide a type mappings when you create the ",(0,n.jsx)(e.a,{href:"./schema-builder",children:"SchemaBuilder"}),". This will\nallow you to reference the type by name throughout your schema (as a string)."]}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," builder = ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"SchemaBuilder"}),"<{ ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Objects"}),": { ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"})," } }>({});\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"objectType"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Giraffe'"}),", {\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"description"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Long necks, cool patterns, taller than you.'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"fields"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({}),\n});\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"queryFields"}),"(",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"giraffe"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"field"}),"({\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"type"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Giraffe'"}),",\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"resolve"}),": ",(0,n.jsx)(e.span,{className:"hljs-function",children:"() =>"})," ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'James'"}),", ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"UTC"}),"(",(0,n.jsx)(e.span,{className:"hljs-number",children:"2012"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"11"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"12"}),")), ",(0,n.jsx)(e.span,{className:"hljs-number",children:"5.2"}),"),\n  }),\n}));\n"]})}),"\n",(0,n.jsx)(e.p,{children:"This is ideal when you want to list out all the types for your schema in one place, or you have\ninterfaces/types that define your data rather than classes, and means you won't have to import\nanything when referencing the object type in other parts of the schema."}),"\n",(0,n.jsxs)(e.p,{children:["The type signature for ",(0,n.jsx)(e.a,{href:"../api/schema-builder",children:"SchemaBuilder"})," is described in more detail\n",(0,n.jsx)(e.a,{href:"../api/schema-builder",children:"later"}),", for now, it is enough to know that the ",(0,n.jsx)(e.code,{children:"Objects"})," type provided to\nthe schema builder allows you to map the names of object types to type definitions that describe the\ndata for those types."]}),"\n",(0,n.jsx)(e.h3,{id:"using-refs",children:"Using Refs"}),"\n",(0,n.jsxs)(e.p,{children:["You can use an ",(0,n.jsx)(e.code,{children:"ObjectRef"})," to reference your class and provide a ",(0,n.jsx)(e.code,{children:"Generic"})," argument that describes\nthe shape or your data."]}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," builder = ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"SchemaBuilder"}),"({});\n\n",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"})," = builder.",(0,n.jsx)(e.span,{className:"hljs-property",children:"objectRef"}),"<",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"GiraffeShape"}),">(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Giraffe'"}),");\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"objectType"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),", {\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"description"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Long necks, cool patterns, taller than you.'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"fields"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({}),\n});\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"queryFields"}),"(",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"giraffe"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"field"}),"({\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"type"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),",\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"resolve"}),": ",(0,n.jsx)(e.span,{className:"hljs-function",children:"() =>"})," ({\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"name"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'James'"}),",\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"birthday"}),": ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"UTC"}),"(",(0,n.jsx)(e.span,{className:"hljs-number",children:"2012"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"11"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"12"}),")),\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"height"}),": ",(0,n.jsx)(e.span,{className:"hljs-number",children:"5.2"}),",\n    }),\n  }),\n}));\n"]})}),"\n",(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"ObjectRefs"})," are useful when you don't want to define all the types in a single place\n(",(0,n.jsx)(e.code,{children:"SchemaTypes"}),") and your data is not represented as classes. Regardless of how you define your\nobject types, ",(0,n.jsx)(e.code,{children:"builder.objectType"})," returns an ",(0,n.jsx)(e.code,{children:"ObjectRef"})," that can be used as a type parameter in\nother parts of the schema."]}),"\n",(0,n.jsx)(e.p,{children:"A slightly simplified version of the above could be written as"}),"\n",(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-typescript",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," builder = ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"SchemaBuilder"}),"({});\n\n",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"})," = builder.",(0,n.jsx)(e.span,{className:"hljs-property",children:"objectRef"}),"<",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"GiraffeShape"}),">(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Giraffe'"}),").",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"implement"}),"({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"description"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'Long necks, cool patterns, taller than you.'"}),",\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"fields"}),": ",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({}),\n});\n\nbuilder.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"queryFields"}),"(",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"t"}),") =>"]})," ({\n  ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"giraffe"}),": t.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"field"}),"({\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"type"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Giraffe"}),",\n    ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"resolve"}),": ",(0,n.jsx)(e.span,{className:"hljs-function",children:"() =>"})," ({\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"name"}),": ",(0,n.jsx)(e.span,{className:"hljs-string",children:"'James'"}),",\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"birthday"}),": ",(0,n.jsx)(e.span,{className:"hljs-keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),"(",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Date"}),".",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"UTC"}),"(",(0,n.jsx)(e.span,{className:"hljs-number",children:"2012"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"11"}),", ",(0,n.jsx)(e.span,{className:"hljs-number",children:"12"}),")),\n      ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"height"}),": ",(0,n.jsx)(e.span,{className:"hljs-number",children:"5.2"}),",\n    }),\n  }),\n}));\n"]})}),"\n",(0,n.jsx)(a,{children:(0,n.jsx)(e.p,{children:"If the type you are defining has a circular reference to itself (either directly, or through\nanother type) you may need to keep `builder.objectRef` and `ref.implement` as separate\nstatements for at least one of the types to allow typescript to correctly resolve the types for\nyour circular references."})})]})}e.default=function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(t,Object.assign({},s,{children:(0,n.jsx)(h,s)}))}}},function(s){s.O(0,[8430,3210,9774,2888,179],function(){return s(s.s=3251)}),_N_E=s.O()}]);