|
| 1 | +# Umbraco GraphQL |
| 2 | + |
| 3 | +## What is this |
| 4 | +An experimental implementation of [GraphQL](https://graphql.org) for Umbraco using [GraphQL for .NET](https://github.com/graphql-dotnet/graphql-dotnet). |
| 5 | + |
| 6 | +Please note this **should not be used in production**, since there a **no security** and all you data will be **publicly available**. |
| 7 | + |
| 8 | +## How does it work |
| 9 | +An Owin middleware exposes Umbraco Published Content as a GraphQL endpoint. |
| 10 | + |
| 11 | +GraphQL types are dynamically generated for all Umbraco document types (content and media), with all the properties as fields. They all implement an interface `PublishedContent` which implements the generic Umbraco properties as fields. |
| 12 | + |
| 13 | +If a document type is alloweded at root, a field on the query is generated with the same name as the document type alias. |
| 14 | + |
| 15 | +There are also two generic fields `content(id: ID!)` and `contentAtRoot` which can be used to query by `id` or getting all root content. |
| 16 | + |
| 17 | +## Getting started |
| 18 | +Clone the repository and run the Website (F5 in Visual Studio), install Umbraco with the starter kit and start exploring the API using GraphiQL by opening `/umbraco/graphiql`. |
| 19 | + |
| 20 | +There's also a [downloaded](https://drive.google.com/file/d/1L67kZV7u6tXy45zknLih421Rlbrx3fh3/view) which contains a prebuilt website with some sample data based on the starter kit. Login `admin@example.org`/`1234567890`. It's based on the Umbraco starter kit, where `People`, `Products` and `Blog` has been moved to the root of the tree. |
| 21 | + |
| 22 | +### Urls |
| 23 | +| Url | Description | |
| 24 | +| --- | ----------- | |
| 25 | +| /umbraco/graphiql | GraphiQL interface | |
| 26 | +| /umbraco/graphql | GraphQL endpoint | |
| 27 | +| /umbraco/graphql/schema | The generated schema | |
| 28 | + |
| 29 | +### Querying |
| 30 | +Query examples based on the download above |
| 31 | + |
| 32 | +```graphql |
| 33 | +{ |
| 34 | + people { |
| 35 | + pageTitle |
| 36 | + children { |
| 37 | + items { |
| 38 | + ... on Person { |
| 39 | + name |
| 40 | + department |
| 41 | + photo { |
| 42 | + url |
| 43 | + } |
| 44 | + } |
| 45 | + } |
| 46 | + } |
| 47 | + } |
| 48 | +} |
| 49 | +``` |
| 50 | + |
| 51 | +We can also do some simple filtering and sorting, ([Inspired by the Grahpcool filtering](https://www.graph.cool/docs/reference/graphql-api/query-api-nia9nushae#query-arguments)) like geting all children of people that starts with the letter `J` |
| 52 | +```graphql |
| 53 | +{ |
| 54 | + people { |
| 55 | + pageTitle |
| 56 | + peopleStartsWithJ:children(filter: { name_starts_with:"J"}, orderBy: name_ASC) { |
| 57 | + items { |
| 58 | + ... on Person { |
| 59 | + name |
| 60 | + department |
| 61 | + photo { |
| 62 | + url |
| 63 | + } |
| 64 | + } |
| 65 | + } |
| 66 | + } |
| 67 | + } |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +And even query for multiple roots at the same time |
| 72 | +```graphql |
| 73 | +{ |
| 74 | + people { |
| 75 | + pageTitle |
| 76 | + peopleStartsWithJ: children(filter: {name_starts_with: "J"}, orderBy: name_ASC) { |
| 77 | + items { |
| 78 | + ...SimplePerson |
| 79 | + } |
| 80 | + } |
| 81 | + } |
| 82 | + products { |
| 83 | + pageTitle |
| 84 | + defaultCurrency |
| 85 | + featuredProducts { |
| 86 | + ...SimpleProduct |
| 87 | + } |
| 88 | + children { |
| 89 | + items { |
| 90 | + ...SimpleProduct |
| 91 | + } |
| 92 | + } |
| 93 | + } |
| 94 | +} |
| 95 | + |
| 96 | +fragment SimplePerson on Person { |
| 97 | + name |
| 98 | + department |
| 99 | + photo { |
| 100 | + url |
| 101 | + } |
| 102 | +} |
| 103 | + |
| 104 | +fragment SimpleProduct on Product { |
| 105 | + name |
| 106 | + price |
| 107 | + sku |
| 108 | + photos { |
| 109 | + url |
| 110 | + } |
| 111 | +} |
| 112 | + |
| 113 | +``` |
0 commit comments