{"_path":"/recipes/typescript-support","_draft":false,"_partial":false,"_empty":false,"title":"Typescript Support","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"type-casting"},"children":[{"type":"text","value":"Type Casting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using TypeScript, It's greatly beneficial to utilize the correct types of your data. This can be done by casting a custom type as demonstrated below."}]},{"type":"element","tag":"code","props":{"code":"const query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n      name\n    }\n  }\n`\n\nconst variables = { limit: 5 }\n\ntype ShipsResult = {\n  ships: {\n    id?: string;\n    name: string;\n  }[]\n}\n\nuseQuery<ShipsResult>(query, variables)\nuseAsyncQuery<ShipsResult>(query, variables)\n","filename":"app.vue","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n      name\n    }\n  }\n`\n\nconst variables = { limit: 5 }\n\ntype ShipsResult = {\n  ships: {\n    id?: string;\n    name: string;\n  }[]\n}\n\nuseQuery<ShipsResult>(query, variables)\nuseAsyncQuery<ShipsResult>(query, variables)\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"graphql-documents"},"children":[{"type":"text","value":"GraphQL documents"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When importing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".gql"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".graphql"}]},{"type":"text","value":" files in TypeScript, A common error you may encounter is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"Cannot find module '*.gql' or its corresponding type declarations\""}]},{"type":"text","value":". This can be resolved by creating a type declaration file as seen below."}]},{"type":"element","tag":"code","props":{"code":"declare module '*.gql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n\ndeclare module '*.graphql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n","filename":"globals.d.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"declare module '*.gql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n\ndeclare module '*.graphql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"type-casting"},"children":[{"type":"text","value":"Type Casting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using TypeScript, It's greatly beneficial to utilize the correct types of your data. This can be done by casting a custom type as demonstrated below."}]},{"type":"element","tag":"code","props":{"code":"const query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n      name\n    }\n  }\n`\n\nconst variables = { limit: 5 }\n\ntype ShipsResult = {\n  ships: {\n    id?: string;\n    name: string;\n  }[]\n}\n\nuseQuery<ShipsResult>(query, variables)\nuseAsyncQuery<ShipsResult>(query, variables)\n","filename":"app.vue","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2151ff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-822746"},"children":[{"type":"text","value":"gql"}]},{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"  query getShips($limit: Int!) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"    ships(limit: $limit) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"      id"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"      name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2151ff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-a8f497"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"ShipsResult"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2151ff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"ships"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  }[]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"useQuery"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"ShipsResult"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"useAsyncQuery"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"ShipsResult"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"variables"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"graphql-documents"},"children":[{"type":"text","value":"GraphQL documents"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When importing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".gql"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".graphql"}]},{"type":"text","value":" files in TypeScript, A common error you may encounter is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"\"Cannot find module '*.gql' or its corresponding type declarations\""}]},{"type":"text","value":". This can be resolved by creating a type declaration file as seen below."}]},{"type":"element","tag":"code","props":{"code":"declare module '*.gql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n\ndeclare module '*.graphql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n","filename":"globals.d.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"'*.gql'"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"DocumentNode"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"'graphql'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"Schema"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"DocumentNode"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2151ff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"Schema"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"'*.graphql'"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"DocumentNode"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-836d40"},"children":[{"type":"text","value":"'graphql'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"Schema"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-aead72"},"children":[{"type":"text","value":"DocumentNode"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fe8bb6"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2151ff"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e5e5bd"},"children":[{"type":"text","value":"Schema"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-025571"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a8f497{color:#D19A66}.ct-e5e5bd{color:#E06C75}.ct-836d40{color:#98C379}.ct-822746{color:#61AFEF}.ct-2151ff{color:#56B6C2}.ct-aead72{color:#E5C07B}.ct-025571{color:#ABB2BF}.ct-fe8bb6{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"type-casting","depth":2,"text":"Type Casting"},{"id":"graphql-documents","depth":2,"text":"GraphQL documents"}]}},"_type":"markdown","_id":"content:2.recipes:3.typescript-support.md","_source":"content","_file":"2.recipes/3.typescript-support.md","_extension":"md"}