Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gatsby-source-takeshape

Package Overview
Dependencies
Maintainers
4
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gatsby-source-takeshape

Use the TakeShape CMS as the data source for your Gatsby website.

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
4
Weekly downloads
 
Created
Source

gatsby-source-takeshape

Use the TakeShape CMS as the data source for your Gatsby website.

  • Gatsby Starter project
  • Example website
  • Example website source

Learning Resources

Using TakeShape with Gatsby

Installing

For use with Gatsby 3.x:

$ npm install --save gatsby-source-takeshape

For use with Gatsby 2.x:

$ npm install --save gatsby-source-takeshape@1

After you install the plugin, add it to your gatsby-config.js like this:

require('dotenv').config()

module.exports = {
  siteMetadata: {
    title: 'Gatsby Source TakeShape Example',
  },
  plugins: [
    {
      resolve: 'gatsby-source-takeshape',
      options: {
        apiKey: process.env.TAKESHAPE_TOKEN,
        projectId: process.env.TAKESHAPE_PROJECT,
      },
    },
  ],
}

.env variables

Like many projects out there, you can use dotenv to load a .env file with variables in your project's directory.

It would look something like this:

TAKESHAPE_PROJECT=<paste project id here>
TAKESHAPE_TOKEN=<paste API key here>

Make sure .env is included in your .gitignore so you don't accidentally commit your API key!

Options

NameTypeDescription
apiKeystringYour API Key from your project. You'll need dev or ci permissions. Create in the API Keys section under the projects dropdown.
projectIdstringYour project ID from your TakeShape project. (see note below)
batchbooleanSet to true to batch queries that happen around the same time. By default, each query is a separate network request. See gatsby-source-graphql for more performance tuning tips. Default: false
fetchOptionsobjectAdditional options to pass in with the second argument to fetch.
dataLoaderOptionsobjectAdvanced. Override or set options passed to Dataloader. Dataloader is used if batch is true.
throttlebooleanThrottle queries based on the x-ratelimit-limit response header. Enabling throttling will slow down your build, but will reduce the risk of hitting your API rate limit. Regardless of throttling, 429 errors are handled with exponential backoff. Default false

You can get your project ID from the URL when logged in to a project on the TakeShape. For example, the URL might look like this: https://app.takeshape.io/projects/b878915b-0f45-406b-b036-8ec76be92d7c In this case, the project ID is b878915b-0f45-406b-b036-8ec76be92d7c

Data Queries

Here is an extremely simple query from the hello world example:

import React from 'react'
import {graphql} from 'gatsby'

export const query = graphql`
  query {
    takeshape {
      helloWorld: getHelloWorld {
        content
      }
    }
  }
`

const IndexPage = ({data}) => <>{data.takeshape.helloWorld.content}</>

export default IndexPage

More advanced examples can be found in the shape-portfolio-gatsby sample project.

You can use the API Explorer in TakeShape to help build your queries. You can get there from "API Explorer" under the project menu. More help can be found in the documentation.

Image Queries

You can use Gatsby's GraphQL queries to pull objects suitable for use with the gatsby-image plugin. TakeShape's fixed and fluid fields will provide objects that support the base64 blur up effect, provide srcSets for responsive images, and faster page loads.

Note: Because of limitations in how Gatsby handles third-party schemas you must include the path field on your image queries for the fixed and fluid fields to work properly.

Fixed

import React from 'react'
import Img from 'gatsby-image'

export const query = graphql`
  query HomepageQuery {
    takeshape {
      homepage: getHomepage {
        title
        image {
          path // <-- this is important, see note above
          fixed(width: 400, height: 400) {
            ...GatsbyTakeShapeImageFixed
          }
        }
      }
    }
  }
`

const Homepage = ({data}) => (
  <>
    <h1>{data.takeshape.homepage.title}</h1>
    <Img fixed={data.takeshape.homepage.image.fixed} />
  </>
)

export default Homepage

Fluid

import React from 'react'
import Img from 'gatsby-image'

export const query = graphql`
  query HomepageQuery {
    takeshape {
      homepage: getHomepage {
        title
        image {
          path // <-- this is important, see note above
          fluid(maxWidth: 400, maxHeight: 400) {
            ...GatsbyTakeShapeImageFluid
          }
        }
      }
    }
  }
`

const Homepage = ({data}) => (
  <>
    <h1>{data.takeshape.homepage.title}</h1>
    <Img fluid={data.takeshape.homepage.image.fluid} />
  </>
)

export default Homepage

Args

Image queries support a number of arguments. Take a look at the type defs to see what you can do.

There is also the imgixParams argument which allows you to pass in arbitrary imgix filters as a query param-formatted string, e.g., crop=faces,edges&txt=Hello%20World!.

Developing

This plugin needs to be run inside of a Gatsby project. See example/README.md for instructions on running the example.

The following scripts are useful when developing:

  • pnpm run lint
  • pnpm run test
  • pnpm run build

Contributing

Open an issue or PR and we'll take a look!

License

MIT

Keywords

FAQs

Package last updated on 13 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc