fauna-gql-upload

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GraphQL code generator - Fauna GQL Upload</title> <link rel="preconnect" href="https://cdnjs.cloudflare.com" /> <link rel="preconnect" href="https://arc.io" /> <link rel="preconnect" href="https://viewm.moonicorn.network" /> <link rel="preconnect" href="https://plausible.io" /> <link rel="stylesheet" href="../../css/main.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.css" integrity="sha512-lTmd0bFMM2Ttm/S8V5dywYNiJaSyF5PILZosvAIzW4EJ7JLEYflk9ImyYIxw5KlFz7e9ZCJN53rnvPnefD240w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script async src="https://arc.io/widget.min.js#3ua6mscf"></script> <script async defer data-domain="fgu-docs.com" src="https://plausible.io/js/plausible.js"></script> </head> <body> <header> <button class="icon-button hamburger"> <img src="../../img/hamburger.svg" /> </button> <h1 class="title">Fauna GQL Upload</h1> <div class="social"> <a href="https://github.com/Plazide/fauna-gql-upload"> <img alt="Github" src="../../img/github.png" /> </a> <a href="https://twitter.com/chj_web"> <img alt="Twitter" src="../../img/twitter.png" /> </a> </div> </header> <nav class="nav"> <header> <button onclick="toggleNavigation()" class="icon-button backburger"> <img src="../../img/backburger.svg" /> </button> <h1 class="title">Fauna GQL Upload</h1> </header> <ul class="list"> <li > <a href="../..">✨ Introduction</a> </li> <li > <a href="../../getting-started/">🏹 Getting started</a> </li> <li class="dropdown"> <button class="dropdown-button"> ⌨️ Configuration <img class="chevron" alt="chevron" src="../../img/chevron.svg" /> </button> <ul class="closed list"> <li > <a href="../../configuration/config-file/">Config file</a> </li> <li > <a href="../../configuration/command-line-options/">Command-line options</a> </li> <li > <a href="../../configuration/local-development/">Local development</a> </li> </ul> </li> <li class="active dropdown"> <button class="dropdown-button"> 🤹 Usage <img class="chevron" alt="chevron" src="../../img/chevron.svg" /> </button> <ul class="list"> <li > <a href="../upload-schema/">Upload schema</a> </li> <li > <a href="../upload-functions/">Upload functions</a> </li> <li > <a href="../upload-indexes/">Upload indexes</a> </li> <li > <a href="../upload-roles/">Upload roles</a> </li> <li > <a href="../upload-data/">Upload data</a> </li> <li > <a href="../upload-access-providers/">Upload access providers</a> </li> <li class="active"> <a href="./">GraphQL code generator</a> </li> <li > <a href="../with-typescript/">With typescript</a> </li> </ul> </li> <li > <a href="../../contributing/">💡 Contributing</a> </li> <li > <a href="../../problems-or-issues/">❌ Problems or issues?</a> </li> </ul> <footer> <a href="https://github.com/Plazide/fauna-gql-upload"> <img alt="Github" src="../../img/github.png" /> </a> <a href="https://twitter.com/chj_web"> <img alt="Twitter" src="../../img/twitter.png" /> </a> </footer> </nav> <main class="main"><h1 id="graphql-code-generator">GraphQL code generator</h1> <p>Fauna GQL Upload supports offers low-config GraphQL code generation.</p> <p>All you need to do is to install the <code>graphql</code> package, like so:</p> <pre><code class="language-sh">yarn add graphql </code></pre> <p>Then, the simplest way to use code generation is to set the <code>codegen</code> property in <code>.fauna.json</code> to <code>true</code>. Like so:</p> <pre><code class="language-js">{ "codegen": true } </code></pre> <p>And then run your npm script:</p> <pre><code class="language-sh">yarn fauna </code></pre> <p>This would create a file at <code>generated/graphql.ts</code> containing your GraphQL types.</p> <p>For a full list of <code>codegen</code> options, see the <a href="/configuration/config-file">config file section</a>.</p> <h2 id="plugins">Plugins</h2> <p>One of the most useful features of the GraphQL Codegen package is the ability to extend its functionality, this is done through plugins. Fauna GQL Upload has two of the most ubiquitous plugins installed by default, <code>typescript</code> and <code>typescript-operations</code>, making it slightly easier to install other plugins.</p> <p>If you'd want to generate types and operations that can be used with React Apollo, you would install the <code>typescript-react-apollo</code> plugin, like so:</p> <pre><code class="language-sh">yarn add -D @graphql-codegen/typescript-react-apollo </code></pre> <p>and then adding it to the <code>.fauna.json</code> file, like so:</p> <pre><code class="language-js">{ "codegen": { "plugins": "typescript-react-apollo" } } </code></pre> <p>And that's it. The plugin should now work. Note that you do <strong>NOT</strong> need to install the <code>typescript</code> and <code>typescript-operations</code> plugins since, as mentioned earlier, these are installed by default.</p> <p>For a list of available plugins see the <a href="https://graphql-code-generator.com/docs/plugins/index">GraphQL Codegen documentation</a>.</p> <h2 id="configuring-plugins">Configuring plugins</h2> <p>There are two ways of passing options to your plugins.</p> <p>The first way is through the <code>codegen.pluginOptions</code> property in <code>.fauna.json</code>. Adding options here will pass them to <em>all</em> of the configured plugins, including the default <code>typescript</code> and <code>typescript-operations</code> plugins. It would look like this:</p> <pre><code class="language-js">{ "codegen": { "pluginOptions": { "omitOperationSuffix": true } } } </code></pre> <p>The above method is useful when you want to configure many plugins that use the same options. If you instead want to apply options to a single plugin, you can pass an array to the <code>codegen.plugins</code> property with the name of the plugin and the desired options. Like this:</p> <pre><code class="language-js">{ "codegen": { "plugins": [ ["typescript-react-apollo", { "withHooks": false }] ] } } </code></pre> <p>If you pass the same option to both the <code>pluginOptions</code> and the local plugin options, the local plugin options will take precedence.</p> <p>You find the plugin options under each specific plugin in the <a href="https://graphql-code-generator.com/docs/plugins/index">GraphQL codegen documentation</a></p></main> <iframe src="https://viewm.moonicorn.network/#%7B%22options%22%3A%7B%22publisherAddr%22%3A%220x60C1D3c8E5FE51bEE5546F6240E18230be4C7Ab2%22%2C%22whitelistedTokens%22%3A%5B%220x6B175474E89094C44Da98b954EedeAC495271d0F%22%5D%2C%22whitelistedType%22%3A%22legacy_160x600%22%2C%22randomize%22%3Atrue%2C%22targeting%22%3A%5B%5D%2C%22width%22%3A%22160%22%2C%22height%22%3A%22600%22%2C%22minPerImpression%22%3A%220%22%2C%22fallbackUnit%22%3Anull%2C%22marketSlot%22%3A%22QmREYH6teaTWQF7uD7TfKuVvqRY3P5WauxDeHoQoJJJ4aA%22%7D%7D" width="160" height="600" scrolling="no" frameborder="0" style="border: 0;" class="ad-frame" onload="window.addEventListener('message', function(ev) { if (ev.data.hasOwnProperty('adexHeight') && ('https://viewm.moonicorn.network' === ev.origin)) { for (let f of document.getElementsByTagName('iframe')) { if (f.contentWindow === ev.source) { f.height = ev.data.adexHeight; } } } }, false)" ></iframe> <script src="../../js/main.js"></script> </body> </html>