{"id":15941464,"url":"https://github.com/harmboschloo/graphql-to-elm","last_synced_at":"2025-10-19T03:31:20.715Z","repository":{"id":29922896,"uuid":"122773137","full_name":"harmboschloo/graphql-to-elm","owner":"harmboschloo","description":"Validates graphql queries and converts them to elm code.","archived":false,"fork":false,"pushed_at":"2023-02-03T05:13:51.000Z","size":1357,"stargazers_count":24,"open_issues_count":8,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T01:11:31.288Z","etag":null,"topics":["elm","graphql"],"latest_commit_sha":null,"homepage":null,"language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/harmboschloo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-24T19:37:42.000Z","updated_at":"2023-06-08T14:35:25.000Z","dependencies_parsed_at":"2023-02-18T03:45:57.808Z","dependency_job_id":null,"html_url":"https://github.com/harmboschloo/graphql-to-elm","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmboschloo%2Fgraphql-to-elm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmboschloo%2Fgraphql-to-elm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmboschloo%2Fgraphql-to-elm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harmboschloo%2Fgraphql-to-elm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harmboschloo","download_url":"https://codeload.github.com/harmboschloo/graphql-to-elm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219869650,"owners_count":16555445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","graphql"],"created_at":"2024-10-07T07:04:30.143Z","updated_at":"2025-10-19T03:31:20.306Z","avatar_url":"https://github.com/harmboschloo.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# graphql-to-elm\n\n`graphql-to-elm` validates GraphQL queries and converts them to Elm code.\nAllowing you to use your queries and schema types in a type-safe way.\n\nThis package assumes that you use GraphQL [query documents](http://graphql.org/learn/queries/)\nand a [schema document](http://graphql.org/learn/schema/) to write your queries and schema in.\nOr that you have a way to generate these documents.\n\nIf you want to write your GraphQL queries in Elm have a look at\n[dillonkearns/elm-graphql](https://github.com/dillonkearns/elm-graphql)\nor [jamesmacaulay/elm-graphql](https://github.com/jamesmacaulay/elm-graphql).\nFor more options have a look at [this discussion](https://discourse.elm-lang.org/t/introducing-graphqelm-a-tool-for-type-safe-graphql-queries/472/4).\n\n## How does it work\n\nSuppose you have a GraphQL query file (`myQuery.gql`):\n\n```gql\nquery UserName {\n  user {\n    name\n  }\n}\n```\n\nThen you create a code generation script (`prebuild.js` for instance) like this:\n\n```js\nconst { graphqlToElm } = require(\"graphql-to-elm\");\n\ngraphqlToElm({\n  schema: \"./src/mySchema.gql\",\n  queries: [\"./src/myQuery.gql\"],\n  src: \"./src\",\n  dest: \"./src-generated\",\n}).catch((error) =\u003e {\n  console.error(error);\n  process.exit(1);\n});\n```\n\nYou run the code generation script (`node prebuild.js`).\n\nThen in your Elm code you can now do this\n([full code here](https://github.com/harmboschloo/graphql-to-elm/tree/master/examples/readme/src/Main.elm)):\n\n```elm\nimport GraphQL.Errors exposing (Errors)\nimport GraphQL.Response exposing (Response)\nimport MyQuery\n\ninit : () -\u003e ( String, Cmd Msg )\ninit _ =\n    ( \"\", postOperation MyQuery.userName GotUserName )\n\ntype Msg\n    = GotUserName (Result Http.Error (Response Errors MyQuery.UserNameQuery))\n\nupdate : Msg -\u003e String -\u003e ( String, Cmd Msg )\nupdate msg _ =\n    case msg of\n        GotUserName (Ok (GraphQL.Response.Data data)) -\u003e\n            ( \"user name: \" ++ data.user.name, Cmd.none )\n\n        GotUserName (Ok (GraphQL.Response.Errors _ _)) -\u003e\n            ( \"GraphQL error\", Cmd.none )\n\n        GotUserName (Err _) -\u003e\n            ( \"Http error\", Cmd.none )\n```\n\n`graphql-to-elm` does not assume anything about how you send your GraphQL operations to your GraphQL server.\nIf you are using GraphQL over http you can define a function to post your operations like this:\n\n```elm\nimport GraphQL.Errors exposing (Errors)\nimport GraphQL.Operation exposing (Operation)\nimport GraphQL.Response exposing (Response)\nimport Http\n\npostOperation : Operation any Errors data -\u003e (Result Http.Error (Response Errors data) -\u003e msg) -\u003e Cmd msg\npostOperation operation msg =\n    Http.post\n        { url = \"/graphql\"\n        , body = Http.jsonBody (GraphQL.Operation.encode operation)\n        , expect = Http.expectJson msg (GraphQL.Response.decoder operation)\n        }\n```\n\n## Setup\n\nYou'll need to have [node/npm](https://nodejs.org) installed.\n\n1.  Install the generator node/npm package `graphql-to-elm` from the command line.  \n    To add it to your project's `package.json` as a dev dependency use this command:\n\n    ```shell\n    npm install --save-dev graphql-to-elm\n    ```\n\n2.  Install the elm package `harmboschloo/graphql-to-elm` from the command line.  \n    To add it to your project's `elm.json` use this command:\n\n    ```shell\n    elm install harmboschloo/graphql-to-elm\n    ```\n\n3.  Create a JavaScript file (for instance `prebuild.js`) similar to this one:\n\n    ```js\n    const { graphqlToElm } = require(\"graphql-to-elm\");\n\n    graphqlToElm({\n      schema: \"./src/schema.gql\",\n      queries: [\"./src/MyQueries1.gql\", \"./src/MyQueries2.gql\"],\n      src: \"./src\",\n      dest: \"./src-generated\",\n    }).catch((error) =\u003e {\n      console.error(error);\n      process.exit(1);\n    });\n    ```\n\n4.  You can run this file from the command line with:\n\n    ```shell\n    node prebuild.js\n    ```\n\n    Running this command will read and validate your schema and queries.\n    And for every query file it will generate and Elm file in the destination folder\n    with Elm types, encoders and decoders.\n\n5.  To use the generated files in your project you have to include the\n    destination folder in the `source-directories` field of your `elm.json`.\n    It should look something like this:\n\n    ```json\n    \"source-directories\": [\n        \"src\",\n        \"src-generated\"\n    ],\n    ```\n\n6.  Now you can import the generated Elm files in your project and use them.\n\n    For full usage examples see the [examples folder](https://github.com/harmboschloo/graphql-to-elm/tree/master/examples)\n    or have a look at the [test fixtures folder](https://github.com/harmboschloo/graphql-to-elm/tree/master/tests/gen/fixtures).\n\n## Overview\n\nFor every query document `graphql-to-elm` will generate valid Elm **types**, **encoders** and **decoders** that you can use in your code.\n\nIt includes support for:\n\n- operations (queries, mutations, subscriptions)\n- operation names\n- fragments\n- inline fragments\n- variables\n- aliases\n- directives\n- enums\n- custom scalar encoders and decoders\n- custom enum encoders and decoders\n- custom error decoder\n- batched queries\n\n## Options\n\n### schema\n\n```TypeScript\nschema: string | { string: string }\n```\n\nFilename of the schema document. Or the whole schema as a string.\n\n### enums\n\n```TypeScript\nenums?: { baseModule?: string} = {\n  baseModule: \"GraphQL.Enum\"\n}\n```\n\nOptions for generating union types from GraphQL enums.\n'baseModule' is the base module name for the union types.\n\n### queries\n\n```TypeScript\nqueries: string[]\n```\n\nArray of filenames of the query documents.\n\n### src\n\n```TypeScript\nsrc?: string = \".\"\n```\n\nBase folder of the queries.\n\n### dest\n\n```TypeScript\ndest?: string = \"src\"\n```\n\nDestination folder for the generateed Elm files.\n\n### encoders\n\n```TypeScript\ninterface TypeEncoders {\n  [graphqlType: string]: TypeEncoder;\n}\n\ninterface TypeEncoder {\n  type: string;\n  encoder: string;\n}\n```\n\n### scalarEncoders\n\n```TypeScript\nscalarEncoders?: TypeEncoders = {}\n```\n\nScalar type encoders.\n\n### enumEncoders\n\n```TypeScript\nenumEncoders?: TypeEncoders = {}\n```\n\nEnum type encoders.\n\n### decoders\n\n```TypeScript\ninterface TypeDecoders {\n  [graphqlType: string]: TypeDecoder;\n}\n\ninterface TypeDecoder {\n  type: string;\n  decoder: string;\n}\n```\n\n### scalarDecoders\n\n```TypeScript\nscalarDecoders?: TypeDecoders = {}\n```\n\nScalar type decoders.\n\n### enumDecoders\n\n```TypeScript\nenumDecoders?: TypeDecoders = {}\n```\n\nEnum type decoders.\n\n### errorsDecoder\n\n```TypeScript\nerrorsDecoder?: TypeDecoder = {\n  type: \"GraphQL.Errors.Errors\",\n  decoder: \"GraphQL.Errors.decoder\"\n}\n```\n\n### operationKind\n\n```TypeScript\noperationKind?: \"query\" | \"named\" | \"named_prefixed\"\n```\n\nSend the full query to the server or only the operation name.\nThe operation name can be prefixed with the query filename: `[filename]:[operationName]`.\n\n### log\n\n```TypeScript\nlog?: (message: string) =\u003e void\n```\n\nCallback for log messages. Set to `null` to disable.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharmboschloo%2Fgraphql-to-elm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharmboschloo%2Fgraphql-to-elm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharmboschloo%2Fgraphql-to-elm/lists"}