Invalid prop query of type object supplied to StaticQuery, expected string.

[chrishawn]

when i have code like

export const MenuPlatforms = () => (
  <>
    <StaticQuery
      query={menuPlatformGroupsQuery}
      render={withPreview(MenuPlatformsRender, menuPlatformGroupsQuery)}
    />
  </>
)
export default MenuPlatforms;

const menuPlatformGroupsQuery = graphql`
    query menuPlatformGroupsQuery {
      prismic {
        menu(lang: "en-us", uid: "platform-menu") {
          menu_name

i keep getting a warning now of

VM1277 commons.js:94825 Warning: Failed prop type: Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`.
    in StaticQuery (at menu-platforms.js:116)
    in MenuPlatforms (at header.js:21)

it seems to run fine, any thoughts on how to fix this warning?
moving the query directly into the StaticQuery produced the same results

my package versions are

    "gatsby": "2.13.52",
    "gatsby-source-prismic-graphql": "3.4.0-beta.1",
    "prismic-javascript": "2.1.1",
    "prismic-reactjs": "1.0.1",
    "prop-types": "^15.7.2",
    "react": "16.8.6",

[raroul]

Same issue here. I think it's related to those lines. Is there a reason that "query" can't be an object ? @braican @birkir

gatsby-source-prismic-graphql/packages/gatsby-source-prismic-graphql/src/gatsby-browser.tsx

Lines 6 to 15 in 6f51996

	// Fixes proptypes warning for StaticQuery
	if (StaticQuery && typeof StaticQuery === 'object' && (StaticQuery as any).propTypes) {
	(StaticQuery as any).propTypes.query = PropTypes.oneOfType([
	PropTypes.string,
	PropTypes.shape({
	id: PropTypes.string,
	source: PropTypes.string,
	}),
	]);
	}

[samburgers]

Upgraded to 3.4.0-beta.1 in attempt to fix this issue: #69

Am now getting the same error as above. Runs ok with error with develop, however breaks completely on the client after gatsby build

The basic StaticQuery example here is not working https://www.gatsbyjs.org/docs/static-query/#basic-example

Thanks in advance

[ghost]

Fixed my issue with updating to 3.4.0-beta.1
Now i got the following error:

×
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `StaticQueryDataRenderer`.

[ghost]

Ok, i have the Solution now for the broken template after updating to 3.4.0-beta.1. You need to replace every component with {RichText.render(document.data.title, linkResolver)}. Now my development and build command just works fine.

[matthewlein]

3.4.0-beta.1 causes another error for prod builds. Develop builds do not show any errors.

TypeError: Cannot read property 'siteMetadata' of undefined

Which I believe is coming from data.site.siteMetadata.title in src/components/layout.js

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
    </>
  )
}

Here is a basic repo that reproduces it https://github.com/matthewlein/prismic-gatsby-errors

My changes were:

1. Create a fresh build from the gatsby-cli,
2. Add the prismic graphql source
3. Add a template

which you can see all here: matthewlein/prismic-gatsby-errors@5ad2ef9

[matthewlein]

Looks to only break the useStaticQuery hook, component-based queries with <StaticQuery> seem to work fine.

[chrishawn]

the main example above that i got this and still get this with is as you say component-based queries with <StaticQuery>

[matthewlein]

Alrighty, it's somewhat related, but maybe not. I created a new issue for the hook #77

[MarcMcIntosh]

@matthewlein thanks for the repo, I've forked it and managed to fix the errors when running npm start and npm build.

The errors where coming from src/template/products.js.

First error Unknown field 'product' on type 'PRISMIC_Product!'
This is solved by changing product to product_name in src/templates/products.js

Second error when running gatsby build.
still in src/template/product.js
change

<h1>Product: {doc.node.product.name}</h1>

<h1>Product: {doc.node.product_name[0].text}</h1>

or better yet

{doc.node.product_name.map(({ text }) => (<h1>Product: {text}</h1>))}

I'll create a PR so you can see the changes.
https://github.com/matthewlein/prismic-gatsby-errors/pull/1/files

[matthewlein]

@MarcMcIntosh Thanks for looking at that, I have a new ticket for the hook #77 that i'll comment on, its unrelated to this issue.

[MarcMcIntosh]

@chrishawn if you can give me a repo in which the issue is recreated i'll take a look :)

[YordanLV]

Is there a fix for this issue? still getting:
Uncaught TypeError: Cannot set property 'query' of undefined

[matthewlein]

@YordanLV You're probably seeing the useStaticHook issue #77. If so, no fix, but you can use the component version to make the query for now https://www.gatsbyjs.org/docs/static-query/

[MarcMcIntosh]

try to set query as a stact property on your component.

export const query = `....`
class MyComponent extends React.Component { ... }
 // here
MyComponent.query = query
export default MyComponent

[madeleineostoja]

@MarcMcIntosh not much use if you're using functional components

[MarcMcIntosh]

@seaneking
Functions are objects, you can assign properties to them.
try it in you console.
var foo = function(){}; foo.bar = "hello"; foo.bar

[madeleineostoja]

Derp, sorry stupid mistake on my part. What I get for commenting pre-coffee 😅

[chrishawn]

@MarcMcIntosh I don't see how this solves the problem at all if you do what you suggest in the example above you just get The prop `query` is marked as required in `StaticQuery`, but its value is `undefined`. and if you remove the static query object the data never gets extracted, and as established int the thread the useStaticHook is broken as well. Where would you put/call your static query? again this is not for page queries

[chrishawn]

to stress, the <StaticQuery> from above works, it just throws a warning in the browser console
Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`.
which should be fixed

[MarcMcIntosh]

@chrishawn it's a solution to an error I've seen a lot of.

[nstolmaker]

As a workaround, you can toString the object.

E.g.

  const staticQuery = graphql`
    {
      site {
        siteMetadata {
          title
        }
      }`;

  return (
    <StaticQuery
      query={staticQuery.toString()}
render={(data) => { stuff here }
} />

EDIT: This solves on problem, but now its throwing a warning in the logs. So, maybe dont do this.

[ceednee]

Using this following solves the problem.

const staticQuery = graphql`
    {
        site {
            siteMetadata {
                title
            }
        }
    }`

export default () => (
  <StaticQuery  
    // expected `string`
    query={`${pageQuery}`}
    render={data => (
      <>
        <myPage data={data}/>
      </>
    )}
  />
)

[mrseanbaines]

query={pageQuery.toString()} also seems to work.

Strange that this is needed though. Gatsby docs for StaticQuery say to pass in the query directly: