<p style="text-align: center;"><img src="https://cosmicjs.imgix.net/26b41d70-5f9a-11e7-b120-9f6bc26aeb8f-amazon-product-search.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><p>Cosmic just released their new Extension functionally, which enables anyone to embed their own custom app inside the Cosmic CMS!</p><p>In this tutorial we&#39;ll be going through some of the steps required to make our Amazon Product Search Extension.</p><h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/amazon-product-search" rel="noopener noreferrer" target="_blank">View the full codebase on GitHub</a><br><a href="https://www.cosmicjs.com/login">Install the Extension in your Bucket in Your Bucket &nbsp;&gt; Extensions &gt; Browse Extensions</a><a data-href="https://www.cosmicjs.com/docs/extensions" href="https://www.cosmicjs.com/docs/extensions" rel="noopener" target="_blank"></a><br><a data-href="https://www.cosmicjs.com/docs/extensions" href="https://www.cosmicjs.com/docs/extensions" rel="noopener" target="_blank">View the Extension documentation</a> for more information on building an Extension</p><h2>The extension we&#39;re building</h2><p>We&#39;re building a simple Extension that allows you to search the Amazon Product Catalogue and add Objects to your bucket with products&#39; name, description, image, and an affiliate link.</p><p>This is quite a simple app, built using react, and we won&#39;t be going into too many details on the parts that don&#39;t directly relate to the new Cosmic Extensions API.</p><h2>Getting access to the Cosmic API in your Extension</h2><p>Cosmic embeds extensions as an <code>&lt;iframe&gt;</code> inside its CMS interface, the extension is given a url with a querystring providing all the information needed for your app to access the relevant bucket like so:</p><p><code>https://43d32000-5ce7-11e7-8fc4-c1f6eec4f920.cosmicext.com/?bucket_slug=my-bucket-slug&amp;read_key=foo&amp;write_key=bar</code></p><p>Extracting these variables, is very easy, and even easier using a library like <code>qs</code>:</p><pre class="prism">import qs from &quot;qs&quot;;

const { bucket_slug, read_key, write_key, } = qs.parse(window.location.search.slice(1, Infinity));

console.log({
   bucket_slug,
   read_key,
   write_key,
});</pre><p>These keys can then be used to make API calls on the bucket your currently using the extension in:</p><pre class="prism">fetch(
   `https://api.cosmicjs.com/v1/${bucket_slug}/object/amazon-credentials${
      read_key
         ? &quot;?read_key=&quot; + read_key
         : &quot;&quot;
   }`,
   opts,
);</pre><p>In our app we use these keys to add new object for Amazon Products that we find.</p><h2>extension.json</h2><p>One file that must be included in your extension is the <code>extension.json</code> file. This tells Cosmic important metadata about your app, like it&#39;s name, icon, display image, and the default Objects and Object Types that should be created when the Extension is first installed. The <code>extension.json</code> for our app is as follows:</p><pre class="prism">{
  &quot;title&quot;: &quot;Amazon Product Search&quot;,
  &quot;font_awesome_class&quot;: &quot;fa-shopping-basket&quot;,
  &quot;image_url&quot;: &quot;http://fla.fg-a.com/shopping-cart/shopping-cart-black-3.png&quot;,
  &quot;objects&quot;: [
    {
      &quot;title&quot;: &quot;Amazon Credentials&quot;,
      &quot;slug&quot;: &quot;amazon-credentials&quot;,
      &quot;type&quot;: &quot;amazon-credentials&quot;,
      &quot;metafields&quot;: [
        {
        &quot;key&quot;: &quot;amz-key&quot;,
        &quot;title&quot;: &quot;Key&quot;,
        &quot;type&quot;: &quot;text&quot;,
        &quot;value&quot;: &quot;&quot;
        },
        {
        &quot;key&quot;: &quot;amz-secret&quot;,
        &quot;title&quot;: &quot;Secret&quot;,
        &quot;type&quot;: &quot;text&quot;,
        &quot;value&quot;: &quot;&quot;
        },
        {
        &quot;key&quot;: &quot;amz-tag&quot;,
        &quot;title&quot;: &quot;Tag&quot;,
        &quot;type&quot;: &quot;text&quot;,
        &quot;value&quot;: &quot;&quot;
        }
      ]
    }
  ],
  &quot;object_types&quot;: [
    {
      &quot;title&quot;: &quot;Amazon Products&quot;,
      &quot;slug&quot;: &quot;amazon-items&quot;,
      &quot;singular&quot;: &quot;Amazon Product&quot;,
      &quot;metafields&quot;:[
        {&quot;key&quot;:&quot;image_url&quot;,&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;&quot;,&quot;title&quot;:&quot;image_url&quot;,&quot;parent&quot;:false,&quot;children&quot;:null},
        {&quot;key&quot;:&quot;affiliate_link&quot;,&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;&quot;,&quot;title&quot;:&quot;affiliate_link&quot;,&quot;parent&quot;:false,&quot;children&quot;:null}
      ]
    }
  ]
}</pre><p>The <code>title</code> field is the name that your extension will display inside Cosmic The <code>font_awesome_class</code> field must be a valid <a href="http://fontawesome.io/icons/">Font Awesome</a> icon name the <code>image_url</code> field is a display image that will show with your extension.</p><p>You also have space to specify a list of objects that will be created when your extension is installed, here we&#39;ve detailed an object that will store our Amazon Product Search credentials. This means that Cosmic will handle saving this information
for us!</p><h2>Deployment and Continuous Integration</h2><p>Uploading your extension to Cosmic is very easy, you just need to take a folder that contains you <code>extension.json</code>file, and an <code>index.html</code> file (and any other assets you need), zip it up, and upload it.</p><p>Our build folder looks like this:</p><pre class="prism"><code>build
├── extension.json
├── index.html
└── static
 └── js
 └── main.a651cd8a.js
</code></pre><p>You can either upload your zip file through the Cosmic CMS, or by using the rest API.</p><p>We use Bitbucket to host our code, which has a built in CI service called Pipelines. You can configure pipelines to run on every commit to the <code>master</code> branch of your git repo, and to upload the newest version of your app to Cosmic&#39;s servers.</p><p>We&#39;ll configure our Bitbucket Pipeline like so:</p><pre class="prism">image: codogo/pipelines-universal:latest

pipelines:
  branches:
    master:
      - step:
          script:
          - yarn install 
          - yarn run lint
          - yarn run build
          - ./uploadNewExtension.sh</pre><p>Where <code>uploadNewExtension.sh</code> contains:</p><pre class="prism">#!/bin/bash

# $BUCKET_SLUG, $READ_KEY, and $WRITE_KEY are environment variables

EXTENSION_NAME=&quot;${EXTENSION_NAME:-Amazon Product Search}&quot;

echo &quot;geting previous version extension id...&quot;
PREVIOUS_EXTENSION_ID=&quot;$( curl --progress-bar &quot;https://api.cosmicjs.com/v1/extensions-2?hide_metafields=true&amp;read_key=foo&quot; | jq -r &quot;.bucket.extensions | map(select(.title == \&quot;$EXTENSION_NAME\&quot; )) | .[0].id&quot;  )&quot;
# jq is a neat little program for extracting data from json, it is available here: https://jqplay.org/

if [ &quot;$PREVIOUS_EXTENSION_ID&quot; == &quot;null&quot; ] ; then
echo &quot;There is no &#39;$EXTENSION_NAME&#39; extension on cosmic to delete&quot;
else
echo &quot;Found id for &#39;$EXTENSION_NAME&#39;: $PREVIOUS_EXTENSION_ID&quot;
echo &quot;deleting old extension...&quot;
curl --progress-bar -X DELETE &quot;https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions/$PREVIOUS_EXTENSION_ID&quot; -d &quot;{\&quot;write_key\&quot;:\&quot;$WRITE_KEY\&quot;}&quot; -H &quot;Content-type: application/json&quot; &gt; /dev/null
fi

echo &quot;upload new version of extension...&quot;
curl --progress-bar --url &quot;https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions&quot; --header &quot;content-type: multipart/form-data&quot; --form &quot;write_key=$WRITE_KEY&quot; --form &quot;zip=@./build.zip&quot; &gt; /dev/null</pre><p>This script will remove any previously uploaded versions of our extension, then take our zipped Extension and upload it to our bucket.</p><h2>Summary</h2><p>In this tutorial we&#39;ve had an introduction to the way Cosmic hosts and integrates with your Extension, and an explanation of how to upload your Extension using Bitbucket&#39;s Continuous integration. If you&#39;ve learnt something, please <a href="https://twitter.com/intent/tweet?text=Building and Publishing a Cosmic Extension Using Bitbucket Pipelines @cosmic_js: https://www.cosmicjs.com/blog/building-and-publishing-a-cosmic-js-extension-using-bitbucket-pipelines" rel="noopener noreferrer" target="_blank">share this article</a>!</p><p>If you&#39;re making an extension, or anything else, with Cosmic <a href="https://www.cosmicjs.com/community">get in touch on our Slack</a> or <a href="https://twitter.com/cosmic_js">Twitter</a>, we&#39;d love to see what you&#39;re making.</p><p>This post was written by <a href="https://consulting.codogo.io/">Codogo</a>, an award-winning digital agency with a passion for creating amazing digital experiences.</p>

Building and Publishing a Cosmic Extension Using Bitbucket Pipelines

<p><img src="https://cosmicjs.imgix.net/5a56d280-4109-11e7-8d6b-a1a75699efdb-cosmicjs-graphql.jpg" style="width: 1005px;" class="fr-fic fr-dib"></p><p>Building and maintaining a React app can be no mean feat. There plenty of tutorials out there covering the technical aspects of making a React app, but as with any technology, it&#39;s often hard to find information on best practices.</p><p>In this post we&#39;ll be exploring some tips, tricks, and techniques we&#39;ve learnt whilst producing React/GraphQL apps for our clients. Hopefully these will help you make your project more performant and simplify maintenance.</p><h3>TL;DR</h3><p><a href="https://www.cosmicjs.com/apps/react-graphql-blog/demo">View demo</a><br><a href="https://www.cosmicjs.com/apps/react-graphql-blog">Install the app on Cosmic</a><br><a href="https://github.com/cosmicjs/react-graphql-blog" rel="noopener noreferrer" target="_blank">Check out the codebase on GitHub</a></p><h3>You probably don&#39;t need state</h3><p>If you&#39;ve been using React for a while, your first instinct when starting a new project might be to set up a state management library like Redux, MobX, or freactal. These are really powerful solutions for state management, that can make wrestling
with the state of a large application much more manageable.</p><p>But, like any library, you shouldn&#39;t start using these state management solutions until you actually need to! For a simple blog like the one we&#39;ll be building today the only state you actually need is the current URL.</p><p>&quot;But!&quot; I hear you cry &quot;How will I store/cache/handle the API-first data I&#39;m fetching over the network, from a great service like Cosmic?&quot;. Well worry not! In the second half of this post we&#39;re going to explore GraphQL, a
system for declaratively fetching data from a server and specifically the Apollo GraphQL client for simply interfacing with GraphQL.</p><p>We&#39;re focusing on a simple, view only app in this post, but it&#39;s worth mentioning that the state provided by class based React components is often sufficient for bits of state that only affect a localised part of your app. Dan Abramov (creator
of Redux) has written in more detail about this subject here</p><h3>Use routing to store your view information</h3><p>Of course, if we don&#39;t have some state, we&#39;d just be displaying our whole web app all at once. Luckily, your browser provides a built in state store with undo history, frictionless sharing, and a simple interface: your URL bar.</p><p>The excellent React Router library provides a simple and expressive interface for navigating around your app. Most of the routing in our example app is handled in the following file:</p><div><pre class="prism">// src/components/posts.js

import styled from &quot;styled-components&quot;;
import { Route, Switch, } from &quot;react-router&quot;;

import Post, { Blank, Home, FourOhFour, } from &quot;./post&quot;;
import Sidebar from &quot;./Sidebar&quot;;

const PostsStyled = styled.div`
&nbsp; &nbsp; background-color:&nbsp;${R.path([&quot;theme&quot;, &quot;white&quot;,])};
&nbsp; &nbsp; flex-direction: row;
`;

export default () =&gt; (
   &lt;PostsStyled&gt;

        &lt;Route path = &quot;/post&quot; component = { Sidebar } /&gt;

        &lt;Switch&gt; 
            &lt;Route path = &quot;/post/:postSlug&quot; component = { Post } /&gt;
            &lt;Route path = &quot;/post/&quot; component = { Blank } /&gt;
            &lt;Route path = &quot;/&quot; exact component = { Home } /&gt;
            &lt;Route component = { FourOhFour } /&gt;
        &lt;/Switch&gt;

    &lt;/PostsStyled&gt;
);</pre></div><p>The first Route renders the sidebar for any URL beginning with /post</p><p>The Switch component renders the first of its children with a matching path. Our routing configuration does the following:</p><ul><li>If the URL is /post/some-post-slug we show the post with the slug some-post-slug</li><li>If the URL is /post we only show the Sidebar that lets you select a post</li><li>If the URL is / we show the home page</li><li>For any other URL we show the 404 page</li></ul><p>All this together means we can simply switch between all the different views of our app just by changing the URL.</p><p>React Router provides a Link component, that acts like a supercharged &lt;a&gt; tag. You should use Link for any hyperlinks that don&#39;t lead out of your website.</p><h3>Styled-Components and ThemeProvider stay on top of your styles</h3><p>CSS precompilers like SASS first enabled web developers to start using variables and functions in their styles. Then React came along and popularised the inline style system:</p><div><pre class="prism">&lt;div
   style = {{
      display: &quot;flex&quot;,
      backgroundColor: &quot;red&quot;,
      color: &quot;white&quot;,
      margin: &quot;4px&quot;,
   }}
/&gt;</pre></div><p>The hottest new trend is Styled Components, which allows you to create new components by specifying a component, and the CSS styles you&#39;d like to apply to it. These styles are automatically vendor-prefixed, and are all converted to a stylesheet in
the end.</p><div><pre class="prism">const Link = styled.a`
&nbsp; &nbsp;color: white;
&nbsp; &nbsp;font-size: 0.8em;
&nbsp; &nbsp;text-decoration: none;
`;</pre></div><p>Styled Components also provide a way to set global variables that are inherited by each styled component. The ThemeProvider component can be used to supply variables to each styled component like so:</p><div><pre class="prism">const theme = {
    white: &quot;#fff&quot;,
    blue: &quot;#00afd7&quot;,
};

export default () =&gt; (
    &lt;ThemeProvider theme = { theme }&gt;
      &lt;App/&gt;
    &lt;/ThemeProvider&gt;
);</pre></div><p>Now every styled component that is a child of App can access those variables using a function in the styles:</p><div><pre class="prism">const Link = styled.a`
&nbsp; &nbsp;color:&nbsp;${ (props) =&gt; props.theme.blue };
&nbsp; &nbsp;font-size: 0.8em;
&nbsp; &nbsp;text-decoration: none;
`</pre></div><p>The theme object can be any javascript object, and the function inside the ${ } block can be any function, so there&#39;s a huge range of cool stuff you can do in your styled components while still keeping all your variables in one unified place.</p><h2>GraphQL</h2><p>GraphQL is a declarative, self documenting API specification that allows you to ask your API only for the data you need. It imposes a few restrictions and ideas on your API, that allows a GraphQL Client to create some really cool features, including:</p><ul><li>Automatic caching.</li><li>Smart resolving data requests from stored data.</li><li>Connecting data fetching to the components that display the data.</li></ul><p>We&#39;re going to be going through and explaining all the steps we&#39;ve used in our example project, but if you&#39;d like a more complete explanation of the GraphQL protocol, you can read about it in full here.</p><p>The GraphQL API provided by Cosmic has 3 queries:</p><ul><li>objects: gets all the objects in a bucket</li><li>objectsByType: gets all the objects of a certain type in a bucket</li><li>object: gets a specific object by its slug</li></ul><p>And those queries are documented in full here.</p><h3>Setting up the Cosmic GraphQL API</h3><p>First we need to set up our ApolloClient:</p><div><pre class="prism">//src/GraphQL/index.js

import { ApolloClient, createNetworkInterface, } from &quot;react-apollo&quot;;

const networkInterface = createNetworkInterface({
    uri: &quot;https://graphql.cosmicjs.com/v1&quot;,
});

const client = new ApolloClient({
    networkInterface,
});

export default client;</pre></div><p>Which we then provide to the rest of our app using the ApolloProvider:</p><div><pre class="prism">//src/app.js

import React from &quot;react&quot;;
import { ApolloProvider, } from &quot;react-apollo&quot;;
import styled, { ThemeProvider, } from &quot;styled-components&quot;;

import client from &quot;./GraphQL&quot;;

export default () =&gt; (
    &lt;ThemeProvider theme = { theme }&gt;
        &lt;ApolloProvider client = { client }&gt;
         &lt;App /&gt;
        &lt;/ApolloProvider&gt;
    &lt;/ThemeProvider&gt;
);</pre></div><p>The Apollo provider means that any component in our app can connect itself to a GraphQL query, meaning each component can ask the client to fetch exactly the data needed to render itself. Don&#39;t worry about multiple components spamming the server with
requests; the ApolloClient handles caching and de-duplication itself!</p><p>We&#39;ll now spend a little time exploring some methods you can use to make GraphQL a little nicer to use, before we start exploring how we&#39;ve used it in this app. We&#39;re not including all the code necessary to run the example in this blog post,
but you can find the source code for our demo project here. Follow along!</p><h3>Reuse Data with Fragments</h3><p>Sometimes you want to get the same fields from an object in two different queries, GraphQL provides a system to do this in the form of Fragments. Fragments allow you to pick some fields from an object, and ask for only those fields.</p><p>For example, in the sidebar we only want some basic information about a post:</p><div><pre class="prism">fragment PostPreview on Object {
    slug
    typeSlug: type_slug
    title
    modifiedAt: modified_at
}</pre></div><p>But in the post itself we want all that information, plus some more:</p><div><pre class="prism">fragment PostAllContent on Object {
    ...PostPreview
    content
    metadata
    order
}</pre></div><p>We can then use the PostPreview fragment in the query used by our Sidebar:</p><div><pre class="prism"># getAllPostsQuery
query($bucketSlug: String! $readKey: String!){
    objects: objectsByType(bucket_slug: $bucketSlug, read_key: $readKey, type_slug: &quot;posts&quot;) {
        ...PostPreview
    }
}</pre></div><p>And the PostAllContent fragment in the query used by our Post component</p><div><pre class="prism"># getPostQuery
query($bucketSlug: String! $readKey: String! $postSlug: String!){
    object(bucket_slug: $bucketSlug, read_key: $readKey, slug: $postSlug) {
        ...PostAllContent
    }
}</pre></div><p>Fragments are great for two reasons:</p><ol><li>They allow you to modularise and reuse the properties you want to get from a query</li><li>They ensure that two queries which should get the same information always stay in sync, so Apollo can successfully cache the results</li></ol><h3>Use Component props as query parameters</h3><p>You&#39;ll notice that the above queries have 2/3 input fields:</p><ul><li>$bucketString: The slug of the bucket we&#39;d like to get objects from</li><li>$readKey: The read key (if needed) to read from the bucket</li><li>$postSlug: The slug of the specific object we want to get (if needed)</li></ul><p>These variables are used to direct the query to the correct data. Apollo gives us a powerful API to set these variables, but often for simple components it&#39;s easier to just set them using props:</p><h4>Default Props</h4><p>For variables that are the same across our app, like $bucketSlug, we can add them to our components using their defaultProps:</p><div><pre class="prism">//src/components/sidebar.js

const Sidebar = graphql(getAllPostsQuery, { name: &quot;allPosts&quot;, })(
   props =&gt; (
      &lt;SidebarStyled&gt;
         &lt;Nav&gt;
            &lt;SidebarText&gt;
               Posts
            &lt;/SidebarText&gt;

            {
            props.allPosts.loading
               ? &lt;Loading /&gt;
               : props.allPosts.objects.map(({ slug, ...rest }) =&gt; (
                  &lt;PostLink key = { slug } slug = { slug } { ...rest } /&gt;
               ))
            }

         &lt;/Nav&gt;
      &lt;/SidebarStyled&gt;
   )
);

SideBar.defaultProps = {
    bucketSlug: config.bucket.slug,
    readKey: config.bucket[&quot;read_key&quot;],
};</pre></div><h4>Dynamic Props</h4><p>For variables that change for different instances of a component, like $postSlug, you can pass them in as a prop to each instance of a component:</p><div><pre class="prism">//src/components/post.js
const PostWrapper = GraphQL(getPostQuery)(props =&gt; (
    &lt;PostContainerStyled&gt;
        {
         props.data.loading
            ? &lt;Loading /&gt;
            : &lt;Post
               noShare = { props.noShare }
               title = { R.path([&quot;data&quot;, &quot;object&quot;, &quot;title&quot;,])(props) }
               content = { R.path([&quot;data&quot;, &quot;object&quot;, &quot;content&quot;,])(props) }
               /&gt;
      }
    &lt;/PostContainerStyled&gt;
));

PostWrapper.defaultProps = {
    bucketSlug: config.bucket.slug,
    readKey: config.bucket[&quot;read_key&quot;],
};

export const Home = () =&gt; &lt;PostWrapper noShare postSlug = &quot;home&quot; /&gt;;</pre></div><h3>Preloading Data</h3><p>It&#39;s always good to prefetch our data before the user needs it, this speeds up page transition time and makes for a nicer UX, Apollo provides a very simple way to do this.</p><p>While the Sidebar gets the query it need to display a preview of each post, it also performs another query:</p><div><pre class="prism">#getAllPostsWithExtraQuery
query($bucketSlug: String! $readKey: String!){
    objectsWithExtra: objectsByType(bucket_slug: $bucketSlug, read_key: $readKey, type_slug: &quot;posts&quot;) {
        ...PostAllContent
    }
}</pre></div><p>This query gets all the fields of every post, meaning all that data is already loaded into the cache before we navigate to a Post page. You can attach multiple queries to a component using the compose function from the react-apollo package.</p><div><pre class="prism">//src/components/sidebar.js

const Sidebar = compose(
    GraphQL(getAllPostsQuery, { name: &quot;allPosts&quot;, }),
    GraphQL(getAllPostsWithExtraQuery, { name: &quot;allPostsPreFetch&quot;, }),
)(props =&gt; (
    &lt;SidebarStyled&gt;
        &lt;Nav&gt;
            &lt;SidebarText&gt;
                Posts
            &lt;/SidebarText&gt;

            &lt;Line /&gt;

            {props.allPosts.loading
                ? &lt;Loading /&gt;
                : props.allPosts.objects.map(({ slug, ...rest }) =&gt; (
                    &lt;PostLink key = { slug } slug = { slug } { ...rest } /&gt;
                    ))}

        &lt;/Nav&gt;
    &lt;/SidebarStyled&gt;
));

SideBar.defaultProps = {
    bucketSlug: config.bucket.slug,
    readKey: config.bucket[&quot;read_key&quot;],
};</pre></div><p>However, if you were to just do this, you would see no improvement in your network performance, and every time you loaded a new post you&#39;d have to make a new network request. To benefit from this preloading we have to tell the ApolloClient a few more things.</p><h3>Teach Apollo the shape of your data</h3><p>By default, ApolloClient assumes that every Object returned by your API is identifiable by a field called id or _id. In Cosmic, each object is identifiable by a field called slug.</p><p>Telling Apollo about this is simple:</p><div><pre class="prism">import { ApolloClient, createNetworkInterface, } from &quot;react-apollo&quot;;
import { toIdValue, } from &quot;Apollo-client&quot;;

// ------------------------------

const networkInterface = createNetworkInterface({
    uri: &quot;https://GraphQL.cosmicjs.com/v1&quot;,
});

const dataIdFromObject = ({ __typename, slug, }) =&gt; __typename + slug;

const customResolvers = {
    Query: {
        object: (_, args) =&gt;
            toIdValue(
                dataIdFromObject({ __typename: &quot;Object&quot;, slug: args.slug, }),
            ),
    },
};

const client = new ApolloClient({
    networkInterface,
    dataIdFromObject,
    customResolvers,
});

//------------------------------

export default client</pre></div><p>The function dataIdFromObject tells ApolloClient how to generate a unique ID from any object it gets.</p><p>The object customResolvers tells ApolloClient that whenever we make an object query, we can try looking in the cache using the query variable slug.</p><p>Now our sidebar preloads all posts using getAllPostsWithExtraQuery, and any future calls to get Post data will be served by ApolloClient&#39;s cache, instead of the network.</p><h3>Load GraphQL queries with webpack</h3><p>Finally, Apollo provides us with another nifty technique to improve the developer experience.</p><p>If you&#39;re using webpack as part of your build system you can keep all your GraphQL queries and mutations in seperate files, and import them into javascript like any other file. This only only means to can benefit from compartmentalised code &amp;
syntax highlighting, it also means that webpack can pre-compile your GraphQL queries into Apollo&#39;s own internal representation at build time, rather than in your user&#39;s browser.</p><p>Integrating the GraphQL loader into webpack is easy, you just have to include the following code in your webpack config:</p><div><pre class="prism">module: {
   rules: [
      {
         test: /\.(GraphQL|gql)$/,
         exclude: /node_modules/,
         loader: &#39;GraphQL-tag/loader&#39;,
      },
   ],
},</pre></div><h2>Conclusion</h2><p>Now you know some of the tips, tricks, and techniques we&#39;ve learnt from using React and GraphQL in production apps. If you&#39;ve learnt something, please share this article!</p><p>If you&#39;re making a static site, or anything else, with Cosmic <a href="https://www.cosmicjs.com/community">get in touch on our Slack</a> or <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Twitter</a>, we&#39;d love to see what you&#39;re making.</p><p>This post was written by <a href="https://codogo.io/" rel="noopener noreferrer" target="_blank">Codogo</a>, an award-winning digital agency with a passion for creating amazing digital experiences.</p>

Blogs by Freddie Ridell

Start building today