You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Then, start your app and open your browser at [http://localhost:1337/graphql](http://localhost:1337/graphql). You should now be able to access the **GraphQL Playground** that will help you to write your GraphQL queries and mutations.
56
+
Then, start your app and open your browser at [http://localhost:1337/graphql](http://localhost:1337/graphql). You should now be able to access the **GraphQL Sandbox** that will help you to write your GraphQL queries and mutations.
57
57
58
58
:::note
59
-
The GraphQL Playground is enabled by default for both the development and staging environments, but disabled in production environments. Set the `playgroundAlways` configuration option to `true` to also enable the GraphQL Playground in production environments (see [plugins configuration documentation](/dev-docs/configurations/plugins#graphql)).
59
+
The GraphQL Sandbox is enabled by default in all environments except production. Set the `landingPage` configuration option to `true` to also enable the GraphQL Playground in production environments (see [plugins configuration documentation](/dev-docs/configurations/plugins#graphql)).
60
60
:::
61
61
62
62
## Configuration
63
63
64
64
Plugins configuration are defined in the `config/plugins.js` file. This configuration file can include a `graphql.config` object to define specific configurations for the GraphQL plugin (see [plugins configuration documentation](/dev-docs/configurations/plugins#graphql)).
65
65
66
-
[Apollo Server](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#apolloserver) options can be set with the `graphql.config.apolloServer`[configuration object](/dev-docs/configurations/plugins#graphql). Apollo Server options can be used for instance to enable the [tracing feature](https://www.apollographql.com/docs/federation/metrics/), which is supported by the GraphQL playground to track the response time of each part of your query. From`Apollo Server` version 3.9 default cache option is `cache: 'bounded'`. You can change it in the `apolloServer` configuration. For more information visit [Apollo Server Docs](https://www.apollographql.com/docs/apollo-server/performance/cache-backends/).
66
+
[Apollo Server](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#apolloserver) options can be passed directly to Apollo with the `graphql.config.apolloServer`[configuration object](/dev-docs/configurations/plugins#graphql). Apollo Server options can be used for instance to enable the [tracing feature](https://www.apollographql.com/docs/federation/metrics/), which is supported by the GraphQL Sandbox to track the response time of each part of your query. The`Apollo Server` default cache option is `cache: 'bounded'`. You can change it in the `apolloServer` configuration. For more information visit [Apollo Server Docs](https://www.apollographql.com/docs/apollo-server/performance/cache-backends/).
67
67
68
68
:::caution
69
69
The maximum number of items returned by the response is limited to 100 by default. This value can be changed using the `amountLimit` configuration option, but should only be changed after careful consideration: a large query can cause a DDoS (Distributed Denial of Service) and may cause abnormal load on your Strapi server, as well as your database server.
70
70
:::
71
71
72
+
## GraphQL Configuration Options
73
+
74
+
The following configuration options are supported by the GraphQL plugin and can be defined in the `config/plugins` file:
75
+
76
+
| Option | Type | Description | Default Value | Notes |
|`shadowCRUD`| Boolean | Enables or disables automatic schema generation for content types. |`true`||
80
+
|`depthLimit`| Number | Limits the depth of GraphQL queries to prevent excessive nesting. |`10`| Use this to mitigate potential DoS attacks. |
81
+
|`amountLimit`| Number | Limits the maximum number of items returned in a single response. |`100`| Use cautiously to avoid performance issues. |
82
+
|`playgroundAlways`| Boolean |[Deprecated] Enables GraphQL Playground in all environments (deprecated). |`false`| Prefer using `landingPage` instead. |
83
+
|`landingPage`| Boolean \| Function | Enables or disables the landing page for GraphQL. Accepts a boolean or a function returning a boolean or an ApolloServerPlugin implementing `renderLandingPage`. ||`false` in production, `true` in other environments |
84
+
|`apolloServer`| Object | Passes configuration options directly to Apollo Server. |`{}`| Example: `{ tracing: true }`|
85
+
86
+
### Example
87
+
88
+
The following is an example of how to use these options in a Strapi configuration file:
89
+
72
90
<TabsgroupId="js-ts">
73
91
74
92
<TabItemvalue="javascript"label="JavaScript">
75
93
76
-
```js title="./config/plugins.js"
77
-
94
+
```javascript title="./config/plugins.js"
78
95
module.exports= {
79
-
//
80
96
graphql: {
81
97
config: {
82
98
endpoint:'/graphql',
83
99
shadowCRUD:true,
84
-
playgroundAlways:false,
100
+
landingPage:false,// disable Sandbox everywhere
85
101
depthLimit:7,
86
102
amountLimit:100,
87
103
apolloServer: {
@@ -97,18 +113,63 @@ module.exports = {
97
113
<TabItemvalue="typescript"label="TypeScript">
98
114
99
115
```ts title="./config/plugins.ts"
100
-
101
116
exportdefault {
102
-
//
103
117
graphql: {
104
118
config: {
105
119
endpoint: '/graphql',
106
120
shadowCRUD: true,
107
-
playgroundAlways: false,
121
+
landingPage: false,// disable Sandbox everywhere
108
122
depthLimit: 7,
109
123
amountLimit: 100,
110
-
apolloServer: {
111
-
tracing: false,
124
+
},
125
+
},
126
+
};
127
+
```
128
+
129
+
</TabItem>
130
+
131
+
</Tabs>
132
+
133
+
Here is an example of using a function to dynamically enable it:
134
+
135
+
<TabsgroupId="js-ts">
136
+
137
+
<TabItemvalue="javascript"label="JavaScript">
138
+
139
+
```javascript title="./config/plugins.js"
140
+
module.exports= ({ env }) => {
141
+
graphql: {
142
+
config: {
143
+
endpoint:'/graphql',
144
+
shadowCRUD:true,
145
+
landingPage: (strapi) => {
146
+
if (env("NODE_ENV") !=="production") {
147
+
returntrue;
148
+
} else {
149
+
returnfalse;
150
+
}
151
+
},
152
+
},
153
+
},
154
+
};
155
+
```
156
+
157
+
</TabItem>
158
+
159
+
<TabItemvalue="typescript"label="TypeScript">
160
+
161
+
```ts title="./config/plugins.ts"
162
+
exportdefault ({ env }) => {
163
+
graphql: {
164
+
config: {
165
+
endpoint: '/graphql',
166
+
shadowCRUD: true,
167
+
landingPage: (strapi) => {
168
+
if (env("NODE_ENV") !=="production") {
169
+
returntrue;
170
+
} else {
171
+
returnfalse;
172
+
}
112
173
},
113
174
},
114
175
},
@@ -119,6 +180,66 @@ export default {
119
180
120
181
</Tabs>
121
182
183
+
### CORS exceptions for Landing Page
184
+
185
+
If the landing page is enabled in production environments (which is not recommended), CORS headers for the Apollo Server landing page must be added manually.
186
+
187
+
To add them globally, you can merge the following into your middleware configuration:
To simplify and automate the build of the GraphQL schema, we introduced the Shadow CRUD feature. It automatically generates the type definitions, queries, mutations and resolvers based on your models.
@@ -940,15 +1061,14 @@ mutation {
940
1061
941
1062
</Request>
942
1063
943
-
Then on each request, send along an `Authorization` header in the form of `{ "Authorization": "Bearer YOUR_JWT_GOES_HERE" }`. This can be set in the HTTP Headers section of your GraphQL Playground.
944
-
1064
+
Then on each request, send along an `Authorization` header in the form of `{ "Authorization": "Bearer YOUR_JWT_GOES_HERE" }`. This can be set in the HTTP Headers section of your GraphQL Sandbox.
945
1065
946
1066
## API tokens
947
1067
948
1068
To use API tokens for authentication, pass the token in the `Authorization` header using the format `Bearer your-api-token`.
949
1069
950
1070
:::note
951
-
Using API tokens in the the GraphQL playground requires adding the authorization header with your token in the `HTTP HEADERS` tab:
1071
+
Using API tokens in the the GraphQL Sandbox requires adding the authorization header with your token in the `HTTP HEADERS` tab:
952
1072
953
1073
```http
954
1074
{
@@ -963,10 +1083,9 @@ Replace `<TOKEN>` with your API token generated in the Strapi Admin panel.
963
1083
964
1084
GraphQL is a query language allowing users to use a broader panel of inputs than traditional REST APIs. GraphQL APIs are inherently prone to security risks, such as credential leakage and denial of service attacks, that can be reduced by taking appropriate precautions.
965
1085
1086
+
### Disable introspection and Sandbox in production
966
1087
967
-
### Disable introspection and playground in production
968
-
969
-
In production environments, disabling the GraphQL Playground and the introspection query is recommended.
1088
+
In production environments, disabling the GraphQL Sandbox and the introspection query is strongly recommended.
970
1089
If you haven't edited the [configuration file](/dev-docs/configurations/plugins#graphql), it is already disabled in production by default.
0 commit comments