Skip to content

Commit 941571e

Browse files
authored
Merge pull request #6554 from DeadMonkeyX/feat/Heartcore-Persisted-queries
Docs for Heartcore Persisted queries
2 parents f8ff41e + 3501d43 commit 941571e

14 files changed

+113
-16
lines changed

umbraco-heartcore/api-documentation/graphql/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,39 @@ query {
5757
}
5858
```
5959

60+
## Persisted queries
61+
62+
The GraphQL API supports [persisted queries](../graphql/persisted-queries.md), running a persisted query can be done using the following payload in the Graphql request:
63+
64+
```json
65+
{
66+
"extensions": {
67+
"persistedQuery": {
68+
"alias": "{Alias}"
69+
}
70+
}
71+
}
72+
```
73+
The persisted queries also support variables
74+
75+
```json
76+
{
77+
"extensions": {
78+
"persistedQuery": {
79+
"alias": "{Alias}"
80+
}
81+
},
82+
"variables": {
83+
"url": "/"
84+
}
85+
}
86+
```
87+
88+
{% hint style="info" %}
89+
Persisted queries can be created within the backoffice in the [GraphQL Playground](../../getting-started/graphql-playground.md#persisted-queries)
90+
{% endhint %}
91+
92+
6093
## [Schema Generation](schema-generation.md)
6194

6295
Information on how the GraphQL schema is generated, reserved names and built-in custom types.
146 KB
Loading
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
description: Documentation for Persisted queries in Umbraco Heartcore
3+
---
4+
5+
# Persisted queries
6+
7+
Persisted queries allow you to store GraphQL queries on the server. This enables clients to execute them by referencing an alias rather than sending the full query each time. this approach streamlines client-server communication and enhances security.
8+
9+
## Why use persisted queries?
10+
11+
* Reducing the payload size
12+
13+
* You minimize the data transmitted over the network by sending only the alias and necessary variables. This reduction in payload size leads to faster request times and is particularly beneficial for mobile applications or environments with limited bandwidth.
14+
15+
* Enhanced Security
16+
17+
* Persisted queries provide improved security by ensuring that only predefined, server-stored GraphQL queries can be executed, preventing clients from running arbitrary or malicious queries.
18+
19+
To fully benefit from this, the content delivery API must be set to private, and GraphQL must be configured only to allow persisted queries. Without these settings in place, the security advantages of using persisted queries are not realized.
20+
21+
## Enable Persisted queries only
22+
23+
In order to fully benefit from the security enhancement that comes with persisted queries you need to enable the ` Only allow GraphQL persisted queries` setting. This can be done from the headless options section within the backoffice
24+
25+
Please be aware this will also disable the execution of queries in the playground.
26+
27+
![Headless settings section](./images/headless-settings-section.png)

umbraco-heartcore/getting-started/graphql-playground.md

Lines changed: 53 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,31 +17,28 @@ The Playground comes with basic features such as real-time error highlighting, s
1717
1. Log into the project backoffice
1818
2. Navigate to the Settings dashboard
1919
3. Find the Headless tree near the bottom of the navigation list
20-
4. Click on GraphQL Playground
20+
4. Click on GraphQL
2121

22-
![Where to find GraphQL Playground](images/where-to-find-graphql-playground.png)
22+
![Where to find GraphQL](images/where-to-find-graphql-playground.png)
2323

2424
From there, you can start querying as soon as your content is published.
2525

2626
## Features
2727

28-
### Documentation
28+
### Documentation & Schema
2929

30-
The GraphQL Playground's built-in documentation can be found on the right side, under the "Docs" tab.
30+
The GraphQL Playground's build-in documentation and schema browser can be found on the left toolbar
3131

32-
The documentation tab grants a quick overview of how content is structured using the Document Types in your solution. It also gives an idea of how to access specific properties on each of the Document Types as well as nested properties and properties from Compositions.
32+
This button will open a panel that grants you a quick overview of how content is structured using the Document Types in your solution.
3333

34-
![Documentation Tab in the Playground](images/docs-helper.png)
34+
It also gives an idea of how to access specific properties on each Document Type, nested properties, and properties from compositions.
3535

36-
The documentation will be automatically updated as you add new Document Types to match the schema you have on your project.
36+
At the same time, it also explains relationships between specific objects and properties in your solution.
3737

38-
## Schema
38+
This will be updated automatically as you change the project's schema meaning Document Types, Data Types, Document Type Compositions, and Document Type Elements.
3939

40-
The Schema tab also can be found on the right side of the GraphQL Playground. It is located below the "Docs" tab.
4140

42-
The Schema menu explains the relationships between specific objects and properties in your solution, and will be updated automatically as you make changes to the project's schema meaning Document Types, Data Types, Document Type Compositions and Document Type Elements.
43-
44-
![Schema Tab in the Playground](images/schema-helper.png)
41+
![Documentation and schema pane in the Playground](images/schema-helper.png)
4542

4643
## Running GraphQL queries
4744

@@ -65,26 +62,66 @@ The Heartcore GraphQL endpoint only supports queries - other operation types, th
6562

6663
After that, press the "Play" button sitting in the center of the Playground. If the query is constructed correctly, the results will be loaded into the right section.
6764

68-
![Schema Tab in the Playground](images/sample-query.png)
65+
![Sample query in the Playground](images/sample-query.png)
6966

7067
When you are satisfied with the result, you can copy the client URL (CURL) by clicking the `COPY CURL` button located in the top part of the Playground, next to the address bar.
7168

7269
## Sending HTTP headers
7370

74-
GraphQL Playground supports requests made with HTTP headers - in case for example an authorization token is needed. The `HTTP HEADERS` section can be accessed from the bottom-left corner of the Playground window. By default, it contains the `umb-project-alias` header, which is the alias of your Heartcore project. It is possible to add multiple headers.
71+
GraphQL Playground supports requests with HTTP headers if an authorization token is needed. The `HTTP HEADERS` section can be accessed from the bottom-right corner of the Playground window. By default, it contains the `umb-project-alias` header, the alias of your Heartcore project. It is possible to add multiple headers.
7572

7673
## Query variables
7774

7875
It is also possible to define variables for queries - such variables's values can be changed in the bottom-left corner of the Playground window, next to the `HTTP HEADERS` section.
7976

80-
![Schema Tab in the Playground](images/query-variables.png)
77+
![Sample query with variables in the Playground ](images/query-variables.png)
8178

8279
## History
8380

84-
If you happened to make an amazing query and afterwards erased it by accident, you would be able to re-use it by finding it in the History. The History menu can be found in the top part of the Playground, above the query input section.
81+
If you happen to make an amazing query and afterward erase it by accident, you can re-use it by finding it in the History.
82+
83+
The History pane can be opened by clicking the history button in the toolbar to the left.
84+
85+
![Shows where the history button is](images/query-history.png)
8586

8687
## Prettify
8788

8889
The Playground gives you an option to "prettify" your query with a click of a button, which makes it easier for humans to read.
8990

9091
![Schema Tab in the Playground](images/prettify.png)
92+
93+
## Persisted Queries
94+
95+
The Graphql playground supports [persisted Graphql queries](../api-documentation/graphql/persisted-queries.md).
96+
To access Persisted queries you have to go to the [GraphQL Playground](#accessing-graphql-playground) and click the persisted queries tab
97+
98+
![Persisted queries tab](images/persisted-queries-tab.png)
99+
100+
### Create a new persisted query
101+
102+
1. Click the `Create Persisted Query` button
103+
2. Enter a name for the query in the new query editor that appears
104+
3. Write your query in the editor
105+
4. Click the `Save` button
106+
107+
![Create persisted query](images/create-persisted-query.png)
108+
109+
### Update a persisted query
110+
111+
1. Find the query you want to update in the persisted queries list
112+
2. Click on the name of the query
113+
3. Make your changes in the editor that appears with the query
114+
4. Click the `Save` button
115+
116+
![Update persisted query](images/update-persisted-query.png)
117+
118+
### Delete a persisted query
119+
120+
1. Find the query you want to delete in the persisted queries list
121+
2. Click on the name of the query
122+
3. Click the action menu in the top right corner of the editor with the query
123+
4. Click the `Delete` button
124+
5. Confirm the deletion
125+
126+
![Delete persisted query](images/delete-persisted-query.png)
127+
88.6 KB
Loading
74 KB
Loading
60.1 KB
Loading
11.7 KB
Loading
89.2 KB
Loading
26.4 KB
Loading

0 commit comments

Comments
 (0)