I am attempting to compile Relay, however it is not recognizing my graphql queries as valid.
Sample query:
const testQuery = graphql`query CustomersQuery {
customers(first: 20) {
nodes {
id
name
}
}
}`
The project is on CRA 2.0 with Typescript.
The build script is as follows:
"relay": "relay-compiler --src ./src --schema ./schema.graphql --language typescript --extensions ts tsx js jsx"
And here is the error I received:
Parse error: Error: RelayFindGraphQLTags: Operation names in graphql tags must be prefixed with the module name and end in "Mutation", "Query", or "Subscription". Got `CustomersQuery` in module `Main`.
Does anyone know why this is happening? It feels like a bug.
Found the answer here. Basically says the the name of your query must be your filename + "Query". So for App.tsx the name of the query would have to be "AppQuery".
Note that the name of the query must be <FileName>Query. So query clientQuery { ... } will only work if the query is in a file named client.js.
Related
Hi i got this error which i got before, but i forgot how i solved it.
I created a new query for Relay but I get this error. I remember it has to do something with Typescript, but not sure what i did wrong.
ERROR:
IRTransformer: Unknown kind `undefined`.
error Command failed with exit code 100.
It is not pointing to a particular place in my code, so not sure which code snippet i should include...
this is the query (but it could easily be another one):
const getEvent = `query CreateEventQuery {
eetschema_event_connection(where: {group_id: {_eq: "17ee3ff5-eae1-4482-9ad6-d791a46a9799"}}) {
edges {
node {
name
}
}
}
}
`;
script I run is yarn relay and the problem is at the yarn-compile step
"export-schema": "get-graphql-schema https://XXXX.hasura.app/v1beta1/relay -h 'x-hasura-admin-secret=XXXXX' > ./schema.graphql",
"relay-compile": "relay-compiler --src=./src --schema=./schema.graphql --language typescript ",
"relay": "npm run export-schema && npm run relay-compile",
Somehow reinstalling the relay compiler worked for me.
yarn add relay-compiler-language-typescript
I was setting up a gatsby-blog and made changes in siteMetadata inside gatsby-config.js.
siteMetadata: {
title: `my blog`,
description: `A Blog starter`,
author: `dan`,
authorTagline: 'Learning',
social: {
twitter: `asdfg`,
},
I also deleted everything inside the content folder so that I could add my own blog posts. As of now, content is an empty folder.
Now, on gatsby develop, I'm getting errors. I'm not proficient in gatsby and graphql, and want to set up this blog quickly. Here's the entire error list:
myPC#myPC:~/Downloads/gatsby-blog$ gatsby develop
success open and validate gatsby-configs - 0.046s
success load plugins - 1.021s
warn The Google Analytics plugin requires a tracking ID. Did you mean to add it?
success onPreInit - 0.026s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.022s
success copy gatsby files - 0.037s
success onPreBootstrap - 0.020s
success createSchemaCustomization - 0.069s
success source and transform nodes - 0.131s
success building schema - 0.375s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Expected type MarkdownRemarkFieldsEnum, found frontmatter___date.
File: gatsby-node.js:7:10
ERROR #85923 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "fields" on type "MarkdownRemark".
If you don't expect "fields" to exist on the type "MarkdownRemark" it is most likely a typo.
However, if you expect "fields" to exist there are a couple of solutions to common problems:
- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "fields" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")
It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemark":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
File: gatsby-node.js:7:10
ERROR #85923 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "frontmatter" on type "MarkdownRemark".
If you don't expect "frontmatter" to exist on the type "MarkdownRemark" it is most likely a typo.
However, if you expect "frontmatter" to exist there are a couple of solutions to common problems:
- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "frontmatter" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")
It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemark":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
File: gatsby-node.js:7:10
[
GraphQLError: Expected type MarkdownRemarkFieldsEnum, found frontmatter___date.
at Object.EnumValue (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/validation/rules/ValuesOfCorrectType.js:112:29)
at Object.enter (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:324:29)
at Object.enter (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:375:25)
at visit (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:242:26)
at validate (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/validation/validate.js:73:24)
at GraphQLRunner.validate (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/query/graphql-runner.js:84:44)
at GraphQLRunner.query (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/query/graphql-runner.js:149:25)
at /home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/bootstrap/create-graphql-runner.js:33:37
at /home/myPC/Downloads/gatsby-blog/gatsby-node.js:10:7
at new Promise (<anonymous>)
at Object.exports.createPages (/home/myPC/Downloads/gatsby-blog/gatsby-node.js:7:10)
at runAPI (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/utils/api-runner-node.js:256:37)
at Promise.catch.decorateEvent.pluginName (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/utils/api-runner-node.js:375:15)
at Promise._execute (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/debuggability.js:384:9)
at Promise._resolveFromExecutor (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/promise.js:518:18)
at new Promise (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/promise.js:103:10) {
locations: [ [Object] ]
},
GraphQLError: Cannot query field "fields" on type "MarkdownRemark".
at Object.Field (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:53:31)
at Object.enter (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:324:29)
at Object.enter (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:375:25)
at visit (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:242:26)
at validate (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/validation/validate.js:73:24)
at GraphQLRunner.validate (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/query/graphql-runner.js:84:44)
at GraphQLRunner.query (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/query/graphql-runner.js:149:25)
at /home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/bootstrap/create-graphql-runner.js:33:37
at /home/myPC/Downloads/gatsby-blog/gatsby-node.js:10:7
at new Promise (<anonymous>)
at Object.exports.createPages (/home/myPC/Downloads/gatsby-blog/gatsby-node.js:7:10)
at runAPI (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/utils/api-runner-node.js:256:37)
at Promise.catch.decorateEvent.pluginName (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/utils/api-runner-node.js:375:15)
at Promise._execute (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/debuggability.js:384:9)
at Promise._resolveFromExecutor (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/promise.js:518:18)
at new Promise (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/promise.js:103:10) {
locations: [ [Object] ]
},
GraphQLError: Cannot query field "frontmatter" on type "MarkdownRemark".
at Object.Field (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:53:31)
at Object.enter (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:324:29)
at Object.enter (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:375:25)
at visit (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/language/visitor.js:242:26)
at validate (/home/myPC/Downloads/gatsby-blog/node_modules/graphql/validation/validate.js:73:24)
at GraphQLRunner.validate (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/query/graphql-runner.js:84:44)
at GraphQLRunner.query (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/query/graphql-runner.js:149:25)
at /home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/bootstrap/create-graphql-runner.js:33:37
at /home/myPC/Downloads/gatsby-blog/gatsby-node.js:10:7
at new Promise (<anonymous>)
at Object.exports.createPages (/home/myPC/Downloads/gatsby-blog/gatsby-node.js:7:10)
at runAPI (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/utils/api-runner-node.js:256:37)
at Promise.catch.decorateEvent.pluginName (/home/myPC/Downloads/gatsby-blog/node_modules/gatsby/dist/utils/api-runner-node.js:375:15)
at Promise._execute (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/debuggability.js:384:9)
at Promise._resolveFromExecutor (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/promise.js:518:18)
at new Promise (/home/myPC/Downloads/gatsby-blog/node_modules/bluebird/js/release/promise.js:103:10) {
locations: [ [Object] ]
}
]
ERROR #11321 PLUGIN
"gatsby-node.js" threw an error while running the createPages lifecycle:
Cannot read property 'allMarkdownRemark' of undefined
35 |
36 | // Create blog posts pages.
> 37 | const posts = result.data.allMarkdownRemark.edges;
| ^
38 |
39 | posts.forEach((post, index) => {
40 | const previous =
File: gatsby-node.js:37:35
TypeError: Cannot read property 'allMarkdownRemark' of undefined
- gatsby-node.js:37
/home/myPC/Downloads/gatsby-blog/gatsby-node.js:37:35
- From previous event:
- api-runner-node.js:258 runAPI
[gatsby-blog]/[gatsby]/dist/utils/api-runner-node.js:258:22
- api-runner-node.js:375 Promise.catch.decorateEvent.pluginName
[gatsby-blog]/[gatsby]/dist/utils/api-runner-node.js:375:15
- From previous event:
- api-runner-node.js:374
[gatsby-blog]/[gatsby]/dist/utils/api-runner-node.js:374:12
- timers.js:456 processImmediate
internal/timers.js:456:21
- From previous event:
- api-runner-node.js:368
[gatsby-blog]/[gatsby]/dist/utils/api-runner-node.js:368:11
- From previous event:
- api-runner-node.js:275 module.exports
[gatsby-blog]/[gatsby]/dist/utils/api-runner-node.js:275:12
- index.js:421 module.exports
[gatsby-blog]/[gatsby]/dist/bootstrap/index.js:421:9
- develop-process.js:433 async module.exports
[gatsby-blog]/[gatsby]/dist/commands/develop-process.js:433:7
failed createPages - 0.145s
success createPagesStatefully - 0.094s
success onPreExtractQueries - 0.003s
success update schema - 0.045s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Expected type MarkdownRemarkFieldsEnum, found frontmatter___date.
File: src/pages/index.js:49:40
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown argument "fields" on field "markdownRemark" of type "Query".
GraphQL request:9:20
8 | }
9 | markdownRemark(fields: { slug: { eq: $slug } }) {
| ^
10 | id
File: src/templates/blog-post.js:77:20
ERROR #85923 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "fields" on type "MarkdownRemark".
If you don't expect "fields" to exist on the type "MarkdownRemark" it is most likely a typo.
However, if you expect "fields" to exist there are a couple of solutions to common problems:
- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "fields" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")
It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemark":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
File: src/templates/blog-post.js:81:7
ERROR #85923 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "frontmatter" on type "MarkdownRemark".
If you don't expect "frontmatter" to exist on the type "MarkdownRemark" it is most likely a typo.
However, if you expect "frontmatter" to exist there are a couple of solutions to common problems:
- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "frontmatter" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")
It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemark":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
File: src/templates/blog-post.js:86:7
failed extract queries from components - 0.476s
success write out requires - 0.046s
success write out redirect data - 0.013s
success Build manifest and related icons - 0.184s
success onPostBootstrap - 0.202s
⠀
info bootstrap finished - 5.922s
⠀
success run static queries - 0.058s - 3/3 51.39/s
success run page queries - 0.024s - 4/4 167.48/s
warn Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
/home/myPC/Downloads/gatsby-blog/src/pages/index.js
49:40 error Expected type MarkdownRemarkFieldsEnum, found frontmatter___date graphql/template-strings
✖ 1 problem (1 error, 0 warnings)
File: src/pages/index.js
failed Building development bundle - 4.692s
Help me fix this issue. Thanks!
You are getting errors because you deleted the /content folder, so all references and queries that point to that content, are now breaking the code because can't fetch what you are querying.
You have references to the missing content in your gatsby-node.js and in your blog-post.js.
The solutions:
Restore the dummy initial content to avoid the code-breaking queries and replace it as soon as you add your new posts
Comment all the queries and references to the query objects (for example in your blog-post.js). This is tedious and not recommended, since you will need to uncomment/restore it as soon as you add new content.
P.S: a query reference to a content may be something like:
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
I'm using react in conjunction Jest and enzyme. My unit tests were working as desired until I added a config.json that lives in src/config/config.js and it appears like so:
{
"appName": "Mystery",
"clients": {
"api1": "http://localhost:8082",
"api2": "http://localhost:8083",
"api3": "http://localhost:8084"
},
}
I import this file in my client folder that I use for network requests in this manner:
import CONFIG from '../../config/config.json';
const api = new Client(CONFIG.clients.api1);
Now when I run npm test I get this error on all my files that use that specified api:
TypeError: Cannot read property 'api1' of undefined
After some google foo.... I'm stymied. Any assistance would be greatly appreciated. Please let me know if additional details are required.
In my MessageItem.tsx component I have the following code:
const data = useFragment(
graphql`
fragment MessageItem_message on Message {
date
body
}
`,
message as any
);
After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, a module named MessageItem_message.graphql.ts gets generated.
But when I run the app it gives me an error:
Failed to compile.
./src/components/MessageItem.tsx
Module not found: Can't resolve
'./__generated__/MessageItem_message.graphql'
The reason is only components at the src root can refer to the right path (./__generated__), whereas components in a folder actually need to refer to the path (../__generated__) but it's not doing so.
How can I configure the path?
Edit .babelrc to point to the artifactDirectory
// .babelrc
{
"plugins": [
[
"relay",
{
"artifactDirectory": "./src/ui/graphql/types"
}
]
]
}
Remove "--artifactDirectory ./src/__generated__" from the relay-compiler options.
By default it seems the Relay compiler puts a "__generated__" directory in the directory with any source code containing GraphQL.
As a result any "./__generated__" references anywhere and at any level in the source code hierarchy now work as they should.
Thanks to #ThibaultBoursier for the pointer.
PS I wonder if the --artifcactDirectory option is just meant to be used to change the name of the artifact directory, rather than its location?
Just moments ago I ran into the same issue. The reason is that the relay-compiler is using the artifactDirectory setting to decide where to put the generated files, but the babel-plugin-relay exposing the graphql tag needs to get the very same argument otherwise it just attempts to include a colocated relative file.
I fixed it in my case by configuring the plugin with a babel-plugin-macros.config.js file as follows (where the artifactDirectory is the same as the one supplied to the relay-compiler):
module.exports = {
relay: {
artifactDirectory: "./src/ui/graphql/types",
},
};
This solution assumes you are using the macro via babel-plugin-macros, otherwise you might need to supply that argument via the .babelrc file but I have no experience with that unfortunately.
I'm trying to take React 0.14 for a spin before I upgrade it in my project. However, with a simple "hello world" prototype, Webpack is throwing an error:
ERROR in ./~/react/lib/ReactElement.js
Module parse failed: /home/dan/Demos/reactiflux/node_modules/babel-loader/index.js!/home/dan/Demos/reactiflux/node_modules/react/lib/ReactElement.js Line 25: Unexpected string
You may need an appropriate loader to handle this file type.
| // The Symbol used to tag the ReactElement type. If there is no native Symbol
| // nor polyfill, then a plain number is used for performance.
| var REACT_ELEMENT_TYPE = typeof _Symbol === 'function' && _Symbol.'for' && _Symbol.'for'('react.element') || 0xeac7;
|
| var RESERVED_PROPS = {
# ./~/react/lib/ReactMount.js 18:19-44
I do have babel-loader configured, and when I downgrade to React 0.13, everything works. What really stands out to me, is _Symbol.'for', in the middle of the error message.
In react/lib/ReactElement.js on line 21 (not 25), that line looks much more correct, with square brackets around the 'for' key:
var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;
I assume that the code shown in the error message is either in an intermediate state during compilation, or is the final compiled output. Does anyone know what could cause Webpack to produce something that looks so wrong? Has anyone successfully used Webpack, Babel and React ~0.14.1 together yet?
update
There is an issue for this: https://github.com/babel/babel/issues/2377
It's closed, but it looks like it came back for me. This was fixed in 5.8.25, but I have 5.8.29 and I still hit the bug.
It appears that the problem has something to do with me including babel runtime. My .babelrc was copied from an older project:
{
"optional": "runtime",
"stage": 0
}
In this little hello-world demo, there is nothing that requires bundling the runtime, so I just removed it, after noticing that https://github.com/DominicTobias/universal-react/, which also uses the same build tools, does not need it. That was the only change I needed to make to get this to build.
My webpack config is super simple:
var path = require("path");
module.exports = {
entry: "./index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index.min.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: "babel"
}]
}
};
I guess that's what I get for copying a config file from a more complex project into what was supposed to be a simplest possible demo.
I see that there is a babel-plugin-runtime as well as a babel-runtime on NPM, but when I tried out BPR for the sake of completeness, Babel complains: Module build failed: ReferenceError: The plugin "runtime" collides with another of the same name. Since I don't actually need the runtime, the linked GH repo is a 404, and since this really belongs in the issue trackers after all, this is as far as I am going to take this for now.
No, that is not valid code. That was an issue in Babel project, but it has been fixed in the 6.0 version which was released recently.
I was run into this issue too, and now I have checked this with latest version, and it is works fine. Here is my test steps:
# install Babel and plugins
npm install babel-cli babel-preset-es2015 babel-plugin-transform-runtime
# install React
npm install react
# run babel against problem react file
./node_modules/.bin/babel node_modules/react/lib/ReactElement.js --plugins transform-runtime --presets es2015
It is provides valid output, so the issue seems to be resolved.
And there is good news for you, babel-loader for webpack already supports 6 version of Babel. Check out its docs for details