-
-
Save matijagrcic/3fa37b80f97b74ed617340172c2b3474 to your computer and use it in GitHub Desktop.
Gatsby + TypeScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Root of Gatsby project | |
module.exports = { | |
client: { | |
tagName: 'graphql', // this tells Apollo Codegen to look for graphql tagged template literals | |
includes: ['src/**/*.tsx', 'src/fragments.ts'], // see fragments.ts below | |
service: { | |
name: 'gatsby', | |
url: 'http://localhost:8000/___graphql', | |
}, | |
}, | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { graphql } from 'gatsby' | |
// put this file inside src folder | |
// declare your globally available GraphQL fragments here | |
export const fragments = graphql` | |
fragment ContentfulFluid on ContentfulFluid { | |
base64 | |
aspectRatio | |
src | |
srcSet | |
srcWebp | |
srcSetWebp | |
sizes | |
} | |
fragment ContentfulFluidSVG on ContentfulFluid { | |
tracedSVG | |
aspectRatio | |
src | |
srcSet | |
srcWebp | |
srcSetWebp | |
sizes | |
} | |
` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Example useStaticQuery | |
// this is src/components/HeaderLogo.tsx | |
import { graphql, Link, useStaticQuery } from 'gatsby' | |
import React from 'react' | |
import { HeaderLogoQuery } from '../types/__generated__/HeaderLogoQuery' | |
const query = graphql` | |
query HeaderLogoQuery { | |
contentfulCompanyMetadata { | |
logoClean { | |
file { | |
url | |
} | |
} | |
} | |
} | |
` | |
export const HeaderLogo: React.FC = () => { | |
const data: HeaderLogoQuery = useStaticQuery(query) | |
const { logoClean } = data.contentfulCompanyMetadata | |
return ( | |
<Link to="/"> | |
<img src={logoClean.file.url} alt="Company Logo" /> | |
</Link> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Example page query | |
// This is src/pages/index.tsx | |
import { graphql } from 'gatsby' | |
import React from 'react' | |
import { SEO } from '../components/SEO' | |
import { HomepageQuery } from '../types/__generated__/HomepageQuery' | |
export const query = graphql` | |
query HomepageQuery { | |
contentfulPageHome { | |
metaDescription | |
} | |
} | |
` | |
interface Props { | |
data: HomepageQuery | |
} | |
const Homepage: React.FC<Props> = ({ data }) => { | |
const { metaDescription } = data.contentfulPageHome | |
return ( | |
<> | |
<SEO metaDescription={metaDescription} /> | |
<p>Hey I’m the homepage</p> | |
</> | |
) | |
} | |
export default Homepage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"scripts": { | |
"develop": "gatsby develop", | |
"build": "gatsby build", | |
"serve": "gatsby serve", | |
"remove-generated-types": "rimraf src/types/__generated__/", | |
"generate": "apollo codegen:generate src/types/__generated__/ --outputFlat --target=typescript --watch", | |
"clean-generate": "npm run remove-generated-types && npm run generate" | |
}, | |
"dependencies": { | |
"gatsby": "^2.6.0", | |
"gatsby-plugin-typescript": "^2.0.14", | |
"react": "^16.8.6", | |
"react-dom": "^16.8.6" | |
}, | |
"devDependencies": { | |
"@types/react": "^16.8.18", | |
"@types/react-dom": "^16.8.4", | |
"rimraf": "^2.6.3" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment