Can't nest types in GraphQL schema
I'm having a really hard time trying to figure out why my pageType on the page / pages is indicating that "PageType is not defined", is there any other way I suppose to link to it? I have a feeling this might be a simple look at how to refer to other types
const PageType = new GraphQLObjectType({
name: 'Page',
fields: {
_id: { type: new GraphQLNonNull(GraphQLID) },
title: { type: GraphQLString },
subtitle: { type: GraphQLString },
description: { type: GraphQLString },
page: {
type: PageType
}
pages: {
type: new GraphQLList(PageType),
}
},
});
Error (mainly to help others find a similar problem):
ReferenceError: PageType is not defined
at Object.<anonymous> (H:\Coding\Projects\react-starter-kit\build\webpack:\src\data\types\PageType.js:50:1)
at __webpack_require__ (H:\Coding\Projects\react-starter-kit\build\webpack:\webpack\bootstrap 8ce5b4572987765a465d:19:1)
at Object.<anonymous> (H:\Coding\Projects\react-starter-kit\build\server.js:731:74)
at __webpack_require__ (H:\Coding\Projects\react-starter-kit\build\webpack:\webpack\bootstrap 8ce5b4572987765a465d:19:1)
at Object.<anonymous> (H:\Coding\Projects\react-starter-kit\build\webpack:\src\data\schema.js:1:1)
at __webpack_require__ (H:\Coding\Projects\react-starter-kit\build\webpack:\webpack\bootstrap 8ce5b4572987765a465d:19:1)
at Object.<anonymous> (H:\Coding\Projects\react-starter-kit\build\server.js:1098:72)
at __webpack_require__ (H:\Coding\Projects\react-starter-kit\build\webpack:\webpack\bootstrap 8ce5b4572987765a465d:19:1)
at Object.<anonymous> (H:\Coding\Projects\react-starter-kit\build\server.js:7455:18)
at __webpack_require__ (H:\Coding\Projects\react-starter-kit\build\webpack:\webpack\bootstrap 8ce5b4572987765a465d:19:1)
at H:\Coding\Projects\react-starter-kit\build\webpack:\webpack\bootstrap 8ce5b4572987765a465d:65:1
at Object.<anonymous> (H:\Coding\Projects\react-starter-kit\build\server.js:71:10)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
source to share
The error is pretty simple. You are trying to reference the PageType before this assignment is made. The same error would occur with a minimal example:
const foo = {
innerFoo: foo // error: foo is not defined
}
This is why functions often called thunks are used in these recursive situations
const foo = {
innerFoo: () => foo
}
By the time it is called foo.innerFoo()
, it foo
will already be defined and this will work. GraphQL schemas support creating fields as functions for this reason.
const FooType = new GraphQLObjectType({
name: 'Foo',
fields: () => ({ // fields is a "thunk"
foo: {
type: FooType
},
foos: {
type: new GraphQLList(FooType),
}
}),
})
source to share