neugelb / gatsby-plugin-generate-typings Goto Github PK

14.0 3.0 7.0 11 KB

Gatsby plugin to automatically generate typescript typings using graphql-codegen

TypeScript 99.73% JavaScript 0.27%

gatsby-plugin-generate-typings's Introduction

Description

This plugin uses graphql-codegen to automatically generate typings for the gatsby graphql schema and your graphql queries.

How to install

using yarn: yarn add gatsby-plugin-generate-typings in your gatsby-config.js add

    {
      // automatically generate typings from graphql schema
      resolve: 'gatsby-plugin-generate-typings',
      options: {
        dest: './src/generated/graphql-types.d.ts',
      },
    },

to automatically generate ./src/generated/graphql-types.d.ts.

Available options

dest: the destination file name, where the typings will be written to.

When do I use this plugin?

When using gatsby-plugin-typescript it comes handy to have typings for your graphql schema and queries.

Examples of usage

When installed as above you can do

import { SiteTitleQueryQuery } from '../generated/graphql-types';

// ... somewhere in your render() function:

<StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={(data: SiteTitleQueryQuery) => {

      // can use data.site.siteMetadata and have full Typescript Typings for it

    }}
  />

gatsby-plugin-generate-typings's People

Contributors

Stargazers

Watchers

Forkers

kerumen rodrigograca31 vvlad5 jdpaterson bond-london arohand mattmischuk

gatsby-plugin-generate-typings's Issues

Does not work with gatsby-transformer-sharp

Hey, thanks for making this plugin!

I'm trying to use it with gatsby-images and gatsby-transformer-sharp, but it can't generate the types when using their fragment. I'm not sure whether it is possible to get the schema generated after the transformers are applied or not.

Example:
CMS / MD

templateKey: index-page
title: Some page

links:
  - label: Some other page
    url: /whatever
    image: /img/my-image.png

Query:

export const pageQuery = graphql`
  query IndexPageTemplate {
    markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        title
        links {
          label
          url
          image {
            childImageSharp {
              fluid(maxWidth: 240, quality: 64) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`;

Error:

Field "image" must not have a selection since type "String" has no subfields

Display Unable to find any GraphQL type defintions for the following pointers

Hi, I found this plugin for use typescript in my gatsby project. thanks to your works! but I got an error when execute gatsby develop command in every times.

ERROR 

error when trying to parse schema, ignoring Unable to find any GraphQL type defintions for the following pointers: /Users/iamchanii/dev/blog/src/**/*.{ts,tsx}



  Error: Unable to find any GraphQL type defintions for the following pointers: /Users/iamchanii/dev/blog/src/**/*.{ts,tsx}
  
  - load-typedefs.ts:91 Object.loadTypedefs
    [blog]/[graphql-toolkit]/src/loaders/load-typedefs.ts:91:11

type definition file is generated successfully and there is no problems to use it. but It's just a little annoying. 😅

this is my gatsby-config.js:

module.exports = {
    siteMetadata: {
        title: `Gatsby Default Starter`,
        description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author: `@gatsbyjs`,
    },
    plugins: [
        `gatsby-plugin-typescript`,
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`,
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `gatsby-starter-default`,
                short_name: `starter`,
                start_url: `/`,
                background_color: `#663399`,
                theme_color: `#663399`,
                display: `minimal-ui`,
                icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                name: 'posts',
                path: `${__dirname}/posts`,
            },
        },
        `gatsby-transformer-remark`,
        {
            resolve: `gatsby-plugin-generate-typings`,
            options: {
                dest: `./src/graphql-types.d.ts`,
            },
        },
        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        // `gatsby-plugin-offline`,
    ],
};

error of type

hi.

i have a below error by added plugin my gatsby-config.js
how can i this error fix

thanks

  Error: Invalid or incomplete introspection result. Ensure that you are passing "data" prop
  erty of introspection response and no "errors" was returned alongside: undefined.

neugelb / gatsby-plugin-generate-typings Goto Github PK

gatsby-plugin-generate-typings's Introduction

Description

How to install

Available options

When do I use this plugin?

Examples of usage

gatsby-plugin-generate-typings's People

Contributors

Stargazers

Watchers

Forkers

gatsby-plugin-generate-typings's Issues

Does not work with gatsby-transformer-sharp

Display Unable to find any GraphQL type defintions for the following pointers

error of type

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent