{
"componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
"path": "/configuration/plugins",
"result": {"data":{"contentPage":{"title":"Special Plugins","globalNotification":null,"websitePrimaryColor":"#808080","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":true,"allowWideContentLayout":false,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Special Plugins\",\n \"beta\": false\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", {\n \"id\": \"section-gatsby-transformer-mdx-introspection\",\n \"className\": \"section-h3\"\n }, mdx(\"h2\", {\n parentName: \"section\",\n \"id\": \"gatsby-transformer-mdx-introspection\"\n }, \"Gatsby Transformer MDX Introspection\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"This plugin statically analyzes the nodes generated by \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gatsby-plugin-mdx\"), \" and generates GraphQL nodes that allow users to find out what MDX-sourced pages contain which manually placed React components or HTML elements that are automatically generated from Markdown.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"It serves use cases that need the full \\\"database\\\" of \\\"what component was placed where.\\\" For example, use cases where there is a need to generate links to component locations could use this plugin.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"It supports the full MDX syntax, using the compiled intermediate JSX code to generate the component tree from. Complex attributes are represented as strings, while simple attributes generally get parsed correctly, which turned out to be sufficient for the typical use case.\")), mdx(\"section\", {\n \"id\": \"section-install\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"install\"\n }, \"Install\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\"\n }, \"npm install --save @commercetools-docs/gatsby-transformer-mdx-introspection\\n\"))), mdx(\"section\", {\n \"id\": \"section-how-to-use\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"how-to-use\"\n }, \"How to use\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Just add the plugin to the plugins array in your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gatsby-config.js\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"plugins: [`@commercetools-docs/gatsby-transformer-mdx-introspection`];\\n\"))), mdx(\"section\", {\n \"id\": \"section-example-graphql-query\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"example-graphql-query\"\n }, \"Example GraphQL query\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"To collect all locations of manually placed \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" components:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-graphql\"\n }, \"query GetAllApiTypes {\\n allComponentInMdx(filter: { component: { eq: \\\"ApiType\\\" } }) {\\n nodes {\\n component\\n attributes {\\n name\\n value\\n }\\n mdx {\\n file: parent {\\n ... on File {\\n relativePath\\n }\\n }\\n }\\n }\\n }\\n}\\n\"))), mdx(\"section\", {\n \"id\": \"section-example-response\",\n \"className\": \"section-h5\"\n }, mdx(\"h4\", {\n parentName: \"section\",\n \"id\": \"example-response\"\n }, \"Example response:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-json\"\n }, \"{\\n \\\"data\\\": {\\n \\\"allComponentInMdx\\\": {\\n \\\"nodes\\\": [\\n {\\n \\\"component\\\": \\\"ApiType\\\",\\n \\\"attributes\\\": [\\n {\\n \\\"name\\\": \\\"apiKey\\\",\\n \\\"value\\\": \\\"test\\\"\\n },\\n {\\n \\\"name\\\": \\\"type\\\",\\n \\\"value\\\": \\\"OutOfOrderPropertiesTestType\\\"\\n }\\n ],\\n \\\"mdx\\\": {\\n \\\"file\\\": {\\n \\\"relativePath\\\": \\\"api/types/index.md\\\"\\n }\\n }\\n },\\n ...\\n ]\\n }\\n }\\n}\\n\"))), mdx(\"section\", {\n \"id\": \"section-options\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"options\"\n }, \"Options\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"tagList\")), \" \", \"[array\", \"<\", \"string | RegExp>]\", \" (\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"required\"), \")\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"JSX components that generate Gatsby data nodes in the final output (other nodes still appear as children in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tree\"), \" and their children can generate nodes). To introspect all nodes for debugging purposes, a wildcard regular expression can be used as the only list term (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"[/.*/]\"), \").\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Note\"), \": most target use cases need to allow specific tags to inspect. This is the recommended approach to improve performance, but the tag list configuration can be used as a block list too by specifying a single regular expression with a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.regular-expressions.info/lookaround.html\"\n }, \"negative look-around\"), \".\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"cleanWhitespace\")), \" \", \"[boolean]\", \" (optional, defaults to true)\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Whether to collapse/trim whitespace in JSX snippets and string literals\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"removeMdxCompilationArtifacts\")), \" \", \"[boolean]\", \" (optional, defaults to true)\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Whether to remove attributes that are (usually) artifacts of MDX compilation (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"mdxType\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"parentName\"), \")\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"shouldIndexNode\")), \" \", \"[(node) \\u21D2 boolean]\", \" (optional, defaults to () \\u21D2 true)\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Predicate function used as a performance escape hatch to filter MDX files that get parsed/indexed. Use if not all MDX files need to be indexed.\")), mdx(\"section\", {\n \"id\": \"section-advanced-queries\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"advanced-queries\"\n }, \"Advanced Queries\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Each node exposes two fields, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"childrenComponentInMdx\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"childComponentInMdx\"), \", that both support filtering and sorting in addition to querying for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"deep\"), \" children (descendents at any level). These fields allow for some advanced use cases:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-graphql\"\n }, \"query GetAllLinksInHeaders {\\n allComponentInMdx(\\n filter: { component: { in: [\\\"h1\\\", \\\"h2\\\", \\\"h3\\\", \\\"h4\\\", \\\"h5\\\", \\\"h6\\\"] } }\\n ) {\\n nodes {\\n childrenComponentInMdx(\\n filter: { component: { in: [\\\"Link\\\", \\\"a\\\"] } }\\n deep: true\\n ) {\\n component\\n content\\n attributes {\\n name\\n value\\n }\\n }\\n }\\n }\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"This query gets all link elements (both Gatsby links and normal anchor HTML elements) that are descendents of headers. If \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"deep\"), \" were \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"false\"), \", then the query would only get link elements that are \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"direct\"), \" children of headers.\")), mdx(\"section\", {\n \"id\": \"section-known-issues\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"known-issues\"\n }, \"Known issues\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The plugin has to parse the MDX separately (and therefore twice in the site build) because \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"gatsby-plugin-mdx\"), \" does lazyly evaluate the abstract syntax tree (AST) property on the MDX GraphQL provided, which means it's available to components using GraphQL but not to other plugins that read from the GatsbyJS Node Objects in earlier build phases.\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"In addition, the plugin has to parse \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"all\"), \" of the MDX upon transforming because it generates Gatsby data nodes from the components, so it can't lazily parse the code like \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"gatsby-plugin-mdx\"), \". Caching helps alleviate this problem, however.\"))))), mdx(\"section\", {\n \"id\": \"section-differences-between-mdx-and-output\",\n \"className\": \"section-h5\"\n }, mdx(\"h4\", {\n parentName: \"section\",\n \"id\": \"differences-between-mdx-and-output\"\n }, \"Differences between MDX and output\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The plugin relies on the compiled JSX created by \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@mdx-js/mdx\"), \" from the MDX source code, so the final representation may contain slight differences compared to the original MDX.\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Inline code blocks like \", \"`\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"code\"), \"`\", \" turn into \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"inlineCode\"), \" elements in the final component tree due to \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://mdxjs.com/getting-started#working-with-components\"\n }, \"the MDX library\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The MDX library adds certain attributes to each HTML or React element it parses, namely, \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"mdxType\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"parentName\"), \". By default, the plugin automatically removes all attributes that match these names. However, since there is no easy way to determine if these attributes were present in the original MDX file, the plugin removes them too. This behavior can be turned off by setting \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"removeMdxCompilationArtifacts\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"false\"), \" in the plugin options\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Whitespace may end up different in text nodes than it was in the original MDX. The plugin attempts to clean up the text nodes it finds, but this can sometimes produce undesired output. Both trimming and collapsing can be turned off by setting \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"cleanWhitespace\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"false\"), \" in the plugin options\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Most complex javascript expressions are string-serialized in the final output, while simple literals (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"boolean\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"number\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"null\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"undefined\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"string\"), \") get parsed to their values\"))), mdx(\"section\", {\n \"id\": \"section-gatsby-transformer-raml\",\n \"className\": \"section-h3\"\n }, mdx(\"h2\", {\n parentName: \"section\",\n \"id\": \"gatsby-transformer-raml\"\n }, \"Gatsby Transformer RAML\")), mdx(\"section\", {\n \"id\": \"section-overview\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"overview\"\n }, \"Overview\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"This plugin parses RAML documents as YAML documents using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/nodeca/js-yaml\"\n }, \"JS-YAML parser\"), \". The parsed RAML documents are expected to be autogenerated from the original RAML using \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/commercetools/rmf-codegen#rmf-codegen\"\n }, \"RMF-codegen\"), \" to have a strict canonical form.\")), mdx(\"section\", {\n \"id\": \"section-installation\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"installation\"\n }, \"Installation\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"npm install @commercetools-docs/gatsby-transformer-raml\"))), mdx(\"section\", {\n \"id\": \"section-usage\",\n \"className\": \"section-h5\"\n }, mdx(\"h4\", {\n parentName: \"section\",\n \"id\": \"usage\"\n }, \"Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"As a prerequisite configure \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gatsby-source-filesystem\"), \" plugin to point the directory of the auto-generated RAML specs, for example \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/api-specs\"), \". The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"apiKey\"), \" for each node on GraphQL is derived from the api.raml directory.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Example \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gatsby-config.js\"), \" content:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// In your gatsby-config.js\\nmodule.exports = {\\n plugins: [\\n {\\n resolve: `gatsby-source-filesystem`,\\n options: {\\n name: `api-specs`,\\n path: `${__dirname}/src/api-specs`,\\n },\\n },\\n {\\n resolve: `@commercetools-docs/gatsby-transformer-raml`,\\n options: {\\n includeApis: ['example'],\\n moveTypePropertiesToTop: ['id'],\\n moveTypePropertiesToBottom: ['custom'],\\n moveEndpointQueryParametersToTop: ['where'],\\n moveEndpointQueryParametersToBottom: ['/^var[.][a-zA-Z0-9]+$/'],\\n },\\n },\\n ],\\n};\\n\"))), mdx(\"section\", {\n \"id\": \"section-how-the-data-flow-works\",\n \"className\": \"section-h5\"\n }, mdx(\"h4\", {\n parentName: \"section\",\n \"id\": \"how-the-data-flow-works\"\n }, \"How the data flow works\"), mdx(\"ol\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"Master RAML in /api-specs/\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"CLI call to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"rmf-codegen\"), \" transforms it into normalized flattened conventional RAML files in /website/src/api-specs/\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \" \")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Gatsby\\u2019s source-filesystem plugin listens to changes and creates and updates file nodes in the gatsby data model.\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Our \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"gatsby-transformer-raml\"), \" plugin creates the API Spec nodes on GraphQL from the file nodes, defining the schema and transforming key-value data structures to arrays to have a queryable GraphQL schema.\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Gatsbyjs static query hooks hold the api endpoints / api types data of a given API respectively.\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"The frontend components use these react hooks to find and use the respective endpoint / type key they got passed as props.\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"The user imports the needed api frontend components into a given MDX page and uses them there.\"))), mdx(\"section\", {\n \"id\": \"section-api-specs-directory-structure\",\n \"className\": \"section-h5\"\n }, mdx(\"h4\", {\n parentName: \"section\",\n \"id\": \"api-specs-directory-structure\"\n }, \"API Specs Directory Structure\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"One of the benefits of the gatsby-transformer-raml tool is that it supports multiple api specs parsing. For this to work properly, we recommend setting up the specs root directory such that all the specs directory are flattened. See example below:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\"\n }, \"\\u251C\\u2500\\u2500 src\\n\\u2502 \\u251C\\u2500\\u2500 api-specs\\n\\u2502 \\u2502 \\u251C\\u2500\\u2500 first-api-spec\\n\\u2502 \\u2502 | \\u251C\\u2500\\u2500 api.raml\\n\\u2502 \\u2502 \\u251C\\u2500\\u2500 second-api-spec\\n\\u2502 \\u2502 | \\u251C\\u2500\\u2500 api.raml\\n\\u2502 \\u2502 \\u251C\\u2500\\u2500 third-api-spec\\n\\u2502 \\u2502 | \\u251C\\u2500\\u2500 api.raml\\n\\u2502 \\u251C\\u2500\\u2500 pages\\n\\u251C\\u2500\\u2500 node_modules\\n\\u251C\\u2500\\u2500 README.md\\n\\u251C\\u2500\\u2500 package.json\\n\\u2514\\u2500\\u2500 .gitignore\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"The example above assumes the RAML specs are sourced from the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"api-specs\"), \" directory.\")), mdx(\"section\", {\n \"id\": \"section-available-plugin-options\",\n \"className\": \"section-h5\"\n }, mdx(\"h4\", {\n parentName: \"section\",\n \"id\": \"available-plugin-options\"\n }, \"Available Plugin Options\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"includeApis\"), \": This is a list of the names each API specifications directory located in \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"./src/api-specs\"), \". Only APIs listed here will be available on the website.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"moveTypePropertiesToTop\"), \": This is the list of API type properties that must be sorted to the top.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"moveTypePropertiesToBottom\"), \": This is the list of API type properties that must be sorted to the bottom.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"moveEndpointQueryParametersToTop\"), \": This is the list of endpoint query parameters that must be sorted to the top.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"moveEndpointQueryParametersToBottom\"), \": This is the list of endpoint query parameters that must be sorted to the bottom.\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Example \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"gatsby-config.js\"), \" content:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// In your gatsby-config.js\\nmodule.exports = {\\n plugins: [\\n {\\n resolve: `@commercetools-docs/gatsby-transformer-raml`,\\n options: {\\n includeApis: ['test'],\\n moveTypePropertiesToTop: ['id', 'name', 'surname'],\\n moveTypePropertiesToBottom: ['last-property'],\\n moveEndpointQueryParametersToTop: ['where', 'sort', 'limit'],\\n moveEndpointQueryParametersToBottom: [\\n 'expand',\\n '/^var[.][a-zA-Z0-9]+$/',\\n ],\\n },\\n },\\n ],\\n};\\n\"))), mdx(\"section\", {\n \"id\": \"section-a-typical-graphql-query\",\n \"className\": \"section-h4\"\n }, mdx(\"h3\", {\n parentName: \"section\",\n \"id\": \"a-typical-graphql-query\"\n }, \"A typical GraphQL query\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Example for reading all types:\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-graphql\"\n }, \"{\\n allRamlType {\\n nodes {\\n apiKey\\n builtinType\\n constant\\n description\\n discriminator\\n discriminatorValue\\n displayName\\n enumDescriptions {\\n name\\n description\\n }\\n enumeration\\n examples {\\n name\\n displayName\\n description\\n value\\n }\\n oneOf\\n properties {\\n beta\\n builtinType\\n constant\\n default\\n deprecated\\n description\\n discriminatorValue\\n enumeration\\n items {\\n type\\n }\\n maxItems\\n maxLength\\n maximum\\n minItems\\n minLength\\n minimum\\n name\\n pattern\\n required\\n type\\n uniqueItems\\n }\\n refersTo\\n type\\n }\\n }\\n}\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Gatsby Transformer MDX Introspection","url":"#gatsby-transformer-mdx-introspection","items":[{"title":"Install","url":"#install"},{"title":"How to use","url":"#how-to-use"},{"title":"Example GraphQL query","url":"#example-graphql-query","items":[{"title":"Example response:","url":"#example-response"}]},{"title":"Options","url":"#options"},{"title":"Advanced Queries","url":"#advanced-queries"},{"title":"Known issues","url":"#known-issues","items":[{"title":"Differences between MDX and output","url":"#differences-between-mdx-and-output"}]}]},{"title":"Gatsby Transformer RAML","url":"#gatsby-transformer-raml","items":[{"title":"Overview","url":"#overview"},{"title":"Installation","url":"#installation","items":[{"title":"Usage","url":"#usage"},{"title":"How the data flow works","url":"#how-the-data-flow-works"},{"title":"API Specs Directory Structure","url":"#api-specs-directory-structure"},{"title":"Available Plugin Options","url":"#available-plugin-options"}]},{"title":"A typical GraphQL query","url":"#a-typical-graphql-query"}]}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":4}},"pageContext":{"slug":"/configuration/plugins","shortTitle":"Plugins","hasReleaseNotes":false}},
"staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989"]}