gatsby-source-takeshape
Use the TakeShape CMS as the data source for your Gatsby website.
Learning Resources
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
Name | Type | Description |
---|---|---|
apiKey |
string |
Your API Key from your project. You'll need dev or ci permissions. Create in the API Keys section under the projects dropdown. |
projectId |
string |
Your project ID from your TakeShape project. (see note below) |
batch |
boolean |
Set 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
|
fetchOptions |
object |
Additional options to pass in with the second argument to fetch . |
dataLoaderOptions |
object |
Advanced. Override or set options passed to Dataloader. Dataloader is used if batch is true . |
throttle |
boolean |
Throttle 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 isb878915b-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 thefixed
andfluid
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!