mirror of
https://github.com/strapi/strapi.git
synced 2025-08-18 21:57:46 +00:00
80 lines
23 KiB
HTML
80 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>GraphQL | Strapi Docs</title>
|
|
<meta name="description" content="API creation made simple, secure and fast.">
|
|
|
|
|
|
<link rel="preload" href="/documentation/assets/css/styles.a8210063.css" as="style"><link rel="preload" href="/documentation/assets/js/app.a8210063.js" as="script"><link rel="preload" href="/documentation/assets/js/12.124227d1.js" as="script"><link rel="prefetch" href="/documentation/assets/js/28.9b077c15.js"><link rel="prefetch" href="/documentation/assets/css/1.styles.77d89b12.css"><link rel="prefetch" href="/documentation/assets/js/1.77d89b12.js"><link rel="prefetch" href="/documentation/assets/css/2.styles.08038ddb.css"><link rel="prefetch" href="/documentation/assets/js/2.08038ddb.js"><link rel="prefetch" href="/documentation/assets/js/3.4d92d5e3.js"><link rel="prefetch" href="/documentation/assets/js/4.385ae6a0.js"><link rel="prefetch" href="/documentation/assets/js/5.edd21cb3.js"><link rel="prefetch" href="/documentation/assets/js/6.fd6e4b24.js"><link rel="prefetch" href="/documentation/assets/js/7.e1f45fa9.js"><link rel="prefetch" href="/documentation/assets/js/8.dc78e1c2.js"><link rel="prefetch" href="/documentation/assets/js/9.fd6a21e6.js"><link rel="prefetch" href="/documentation/assets/js/10.f9e7d997.js"><link rel="prefetch" href="/documentation/assets/js/11.bfb9de0f.js"><link rel="prefetch" href="/documentation/assets/js/13.d8092700.js"><link rel="prefetch" href="/documentation/assets/js/14.7cfd4cb8.js"><link rel="prefetch" href="/documentation/assets/js/15.55a20f7c.js"><link rel="prefetch" href="/documentation/assets/js/16.5c84c402.js"><link rel="prefetch" href="/documentation/assets/js/17.1c93d494.js"><link rel="prefetch" href="/documentation/assets/js/18.e1f1758f.js"><link rel="prefetch" href="/documentation/assets/js/19.8d1b00cd.js"><link rel="prefetch" href="/documentation/assets/js/20.856d7bdd.js"><link rel="prefetch" href="/documentation/assets/js/21.6f851286.js"><link rel="prefetch" href="/documentation/assets/js/22.7ddb4e1d.js"><link rel="prefetch" href="/documentation/assets/js/23.15e5a0c3.js"><link rel="prefetch" href="/documentation/assets/js/24.6fdf34d0.js"><link rel="prefetch" href="/documentation/assets/js/25.21c9a549.js"><link rel="prefetch" href="/documentation/assets/js/26.6608295c.js"><link rel="prefetch" href="/documentation/assets/js/27.2c9596ea.js"><link rel="prefetch" href="/documentation/assets/js/29.8ea8ecc1.js"><link rel="prefetch" href="/documentation/assets/js/30.5d2829b8.js"><link rel="prefetch" href="/documentation/assets/js/31.fad00a3a.js"><link rel="prefetch" href="/documentation/assets/js/32.a6900221.js"><link rel="prefetch" href="/documentation/assets/js/33.bbfb3084.js"><link rel="prefetch" href="/documentation/assets/js/34.0eb2f8aa.js"><link rel="prefetch" href="/documentation/assets/js/35.76c29241.js"><link rel="prefetch" href="/documentation/assets/js/36.dfcc07a1.js"><link rel="prefetch" href="/documentation/assets/js/37.173a8112.js"><link rel="prefetch" href="/documentation/assets/js/38.b86fac79.js"><link rel="prefetch" href="/documentation/assets/js/39.a7d50afe.js"><link rel="prefetch" href="/documentation/assets/js/40.0415492d.js"><link rel="prefetch" href="/documentation/assets/js/41.5ef681df.js"><link rel="prefetch" href="/documentation/assets/js/42.fdd80522.js"><link rel="prefetch" href="/documentation/assets/js/43.03b496f2.js"><link rel="prefetch" href="/documentation/assets/js/44.3f55a367.js"><link rel="prefetch" href="/documentation/assets/js/45.6746c3dc.js"><link rel="prefetch" href="/documentation/assets/js/46.ff6bc353.js"><link rel="prefetch" href="/documentation/assets/js/47.53b7147a.js"><link rel="prefetch" href="/documentation/assets/js/48.31a883aa.js"><link rel="prefetch" href="/documentation/assets/js/49.18bd1a60.js"><link rel="prefetch" href="/documentation/assets/js/50.9b6079cd.js"><link rel="prefetch" href="/documentation/assets/js/51.b67aee1b.js"><link rel="prefetch" href="/documentation/assets/js/52.62bc63b6.js"><link rel="prefetch" href="/documentation/assets/js/53.2c567c55.js"><link rel="prefetch" href="/documentation/assets/js/54.6cc10d25.js"><link rel="prefetch" href="/documentation/assets/js/55.7faca13f.js"><link rel="prefetch" href="/documentation/assets/js/56.0b06ad54.js"><link rel="prefetch" href="/documentation/assets/js/57.a87c48df.js"><link rel="prefetch" href="/documentation/assets/js/58.1c6547d9.js"><link rel="prefetch" href="/documentation/assets/js/59.06f908d7.js"><link rel="prefetch" href="/documentation/assets/js/60.b5156b8d.js"><link rel="prefetch" href="/documentation/assets/js/61.1d5cafa9.js"><link rel="prefetch" href="/documentation/assets/js/62.ccacebe2.js"><link rel="prefetch" href="/documentation/assets/js/63.66946dde.js"><link rel="prefetch" href="/documentation/assets/js/64.d53bdeb7.js"><link rel="prefetch" href="/documentation/assets/js/65.0cd2da1f.js"><link rel="prefetch" href="/documentation/assets/js/66.03059dce.js"><link rel="prefetch" href="/documentation/assets/js/67.6f988923.js"><link rel="prefetch" href="/documentation/assets/js/68.303c1a05.js"><link rel="prefetch" href="/documentation/assets/js/69.3f4ed952.js"><link rel="prefetch" href="/documentation/assets/js/70.531d76be.js"><link rel="prefetch" href="/documentation/assets/js/71.ab3e74fc.js">
|
|
<link rel="stylesheet" href="/documentation/assets/css/styles.a8210063.css"><link rel="stylesheet" href="/documentation/assets/css/1.styles.77d89b12.css"><link rel="stylesheet" href="/documentation/assets/css/2.styles.08038ddb.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/documentation/" class="home-link router-link-active"><!----> <span class="site-name">
|
|
Strapi Docs
|
|
</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"> <a href="https://github.com/strapi/strapi" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"> <a href="https://github.com/strapi/strapi" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div><select class="version-selector"><option value="/3.x.x/">Version 3.x.x</option><option value="/1.x.x/" selected="selected">Version 1.x.x</option></select></div> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>UsefulLinks</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/documentation/1.x.x/" class="sidebar-link">Introduction</a></li><li><a href="https://strapi.io" class="sidebar-link">Strapi Website</a></li><li><a href="https://github.com/strapi/strapi" class="sidebar-link">GitHub Repository</a></li><li><a href="https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md" class="sidebar-link">Contribution Guide</a></li></ul></div></li><li><a href="/documentation/1.x.x/admin.html" class="sidebar-link">Admin</a></li><li><a href="/documentation/1.x.x/configuration.html" class="sidebar-link">Configuration</a></li><li><a href="/documentation/1.x.x/email.html" class="sidebar-link">Email</a></li><li><a href="/documentation/1.x.x/introduction.html" class="sidebar-link">Introduction</a></li><li><a href="/documentation/1.x.x/queries.html" class="sidebar-link">Query Interface</a></li><li><a href="/documentation/1.x.x/response.html" class="sidebar-link">Response</a></li><li><a href="/documentation/1.x.x/sessions.html" class="sidebar-link">Sessions</a></li><li><a href="/documentation/1.x.x/testing.html" class="sidebar-link">Testing</a></li><li><a href="/documentation/1.x.x/views.html" class="sidebar-link">Views</a></li><li><a href="/documentation/1.x.x/blueprints.html" class="sidebar-link">Blueprints</a></li><li><a href="/documentation/1.x.x/context.html" class="sidebar-link">Context</a></li><li><a href="/documentation/1.x.x/graphql.html" class="active sidebar-link">GraphQL</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/documentation/1.x.x/graphql.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/documentation/1.x.x/graphql.html#execute-simple-query" class="sidebar-link">Execute simple query</a></li><li class="sidebar-sub-header"><a href="/documentation/1.x.x/graphql.html#execute-complex-queries" class="sidebar-link">Execute complex queries</a></li></ul></li><li><a href="/documentation/1.x.x/logging.html" class="sidebar-link">Logging</a></li><li><a href="/documentation/1.x.x/router.html" class="sidebar-link">Router</a></li><li><a href="/documentation/1.x.x/upload.html" class="sidebar-link">Upload</a></li><li><a href="/documentation/1.x.x/cli.html" class="sidebar-link">CLI</a></li><li><a href="/documentation/1.x.x/customization.html" class="sidebar-link">Customization</a></li><li><a href="/documentation/1.x.x/internationalization.html" class="sidebar-link">Internationalization</a></li><li><a href="/documentation/1.x.x/models.html" class="sidebar-link">Models</a></li><li><a href="/documentation/1.x.x/request.html" class="sidebar-link">Request</a></li><li><a href="/documentation/1.x.x/services.html" class="sidebar-link">Services</a></li><li><a href="/documentation/1.x.x/users.html" class="sidebar-link">Users</a></li></ul> </div> <div class="page"><div class="content"><h1 id="graphql"><a href="#graphql" aria-hidden="true" class="header-anchor">#</a> GraphQL</h1> <p>GraphQL is a data querying language that allows you to execute complex nested
|
|
requests between your clients and server applications.</p> <h2 id="configuration"><a href="#configuration" aria-hidden="true" class="header-anchor">#</a> Configuration</h2> <p>By default, GraphQL is enabled and the HTTP endpoint is <code>/graphql</code>.
|
|
You can override this settings in the <code>./config/general.json</code> file.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token string">"graphql"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"enabled"</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token string">"route"</span><span class="token punctuation">:</span> <span class="token string">"/graphql"</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>Options:</p> <ul><li><code>enabled</code> (boolean): Enabled or disabled GraphQL.</li> <li><code>route</code> (string): Change GraphQL endpoint.</li></ul> <p>Note: If GraphQL is disabled, the GraphQL global variable is not exposed.</p> <h2 id="execute-simple-query"><a href="#execute-simple-query" aria-hidden="true" class="header-anchor">#</a> Execute simple query</h2> <h3 id="programmatically"><a href="#programmatically" aria-hidden="true" class="header-anchor">#</a> Programmatically</h3> <p>Strapi takes over GraphQL natively. We added a function called <code>query</code> to execute
|
|
your query without given as a parameters the GraphQL schemas each time.</p> <p>An example of how to use <code>query</code> function:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Build your query</span>
|
|
<span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token string">'{ users{firstName lastName posts{title}} }'</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Execute the query</span>
|
|
graphql<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>query<span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>And the JSON result:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token string">"users"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
|
<span class="token string">"firstname"</span><span class="token punctuation">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"lastname"</span><span class="token punctuation">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"posts"</span><span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span>
|
|
<span class="token string">"title"</span><span class="token punctuation">:</span> <span class="token string">"First title..."</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"title"</span><span class="token punctuation">:</span> <span class="token string">"Second title..."</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"title"</span><span class="token punctuation">:</span> <span class="token string">"Third title..."</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token string">"firstname"</span><span class="token punctuation">:</span> <span class="token string">"Karl"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"lastname"</span><span class="token punctuation">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
|
|
<span class="token string">"posts"</span><span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span>
|
|
<span class="token string">"title"</span><span class="token punctuation">:</span> <span class="token string">"Fourth title..."</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><h3 id="with-a-http-request"><a href="#with-a-http-request" aria-hidden="true" class="header-anchor">#</a> With a HTTP request</h3> <p>Strapi also provides a HTTP GraphQL server to execute request from your front-end application.</p> <p>An example of how to execute the same request as above with a HTTP request with jQuery.</p> <div class="language-js extra-class"><pre class="language-js"><code>$<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'http://yourserver.com/graphql?query={ users{firstName lastName posts{title}} }'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="execute-complex-queries"><a href="#execute-complex-queries" aria-hidden="true" class="header-anchor">#</a> Execute complex queries</h2> <h3 id="query-parameters"><a href="#query-parameters" aria-hidden="true" class="header-anchor">#</a> Query parameters</h3> <p>If you're using Waterline ORM installed by default with Strapi, you have access to
|
|
some Waterline query parameters in your GraphQL query such as <code>sort</code>, <code>limit</code> or <code>skip</code>.
|
|
Strapi also provides the <code>start</code> and <code>end</code> parameters to select records between two dates.</p> <p>This example will return 10 users' records sorted alphabetically by <code>firstName</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token string">'{ users(limit: 10, sort: "firstName ASC"){firstName lastName post{title}} }'</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>You can access to the 10 next users by adding the <code>skip</code> parameter:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token string">'{ users(limit: 10, sort: "firstName ASC", skip: 10){firstName lastName posts{title}} }'</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>And you also can select those records in a period between two dates with the <code>start</code> and <code>end</code> parameters:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token string">'{ users(limit: 10, sort: "firstName ASC", skip: 10, start: "09/21/2015", end:" 09/22/2015"){firstName lastName posts{title}} }'</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="useful-functions"><a href="#useful-functions" aria-hidden="true" class="header-anchor">#</a> Useful functions</h3> <p>Strapi comes with a powerful set of useful functions such as <code>getLatest<Model></code>, <code>getFirst<Model></code> and <code>count<Model></code>.</p> <p>Returns the 5 latest users from the September 27th 2015 at 8:59:59 PM:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token string">'{ getLatestUsers(count: 5, start: "9/27/2015 20:59:59"){firstName lastName posts{title}} }'</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Returns the 5 first users:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token string">'{ getFirstUsers(count: 5){firstName lastName posts{title}} }'</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Returns the number of subscribers the September 28th 2015:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token string">'{ countUsers(start: "9/28/2015", end: "9/28/2015") }'</span><span class="token punctuation">;</span>
|
|
</code></pre></div></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/strapi/strapi/edit/master/docs/1.x.x/graphql.md" target="_blank" rel="noopener noreferrer">Improve this page</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
|
|
← <a href="/documentation/1.x.x/context.html" class="prev">
|
|
Context
|
|
</a></span> <span class="next"><a href="/documentation/1.x.x/logging.html">
|
|
Logging
|
|
</a> →
|
|
</span></p></div> </div></div></div>
|
|
<script src="/documentation/assets/js/12.124227d1.js" defer></script><script src="/documentation/assets/js/app.a8210063.js" defer></script>
|
|
</body>
|
|
</html>
|