search

vasansr / pro-mern-stack-2

Code listing for the book Pro MERN Stack, 2nd Edition
https://www.apress.com/book/9781484243909
333 stars 190 forks source link

GraphQL Scalar Date error #16

Closed petelc closed 4 years ago

petelc commented 4 years ago

I am in Chapter 5 working through creating custom scalar types and create api sections. When ever I implement the scalar type in server.js and app.jsx I get the below error

`react-dom.development.js:13548 Uncaught Error: Objects are not valid as a React child (found: Wed Sep 23 2020 00:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead. in td (created by IssueRow) in tr (created by IssueRow) in IssueRow (created by IssueTable) in tbody (created by IssueTable) in table (created by IssueTable) in IssueTable (created by IssueList) in IssueList at throwOnInvalidObjectType (react-dom.development.js:13548) at reconcileChildFibers (react-dom.development.js:14448) at reconcileChildren (react-dom.development.js:16897) at updateHostComponent (react-dom.development.js:17437) at beginWork (react-dom.development.js:18762) at HTMLUnknownElement.callCallback (react-dom.development.js:182) at Object.invokeGuardedCallbackDev (react-dom.development.js:231) at invokeGuardedCallback (react-dom.development.js:286) at beginWork$1 (react-dom.development.js:23338) at performUnitOfWork (react-dom.development.js:22289) throwOnInvalidObjectType @ react-dom.development.js:13548 reconcileChildFibers @ react-dom.development.js:14448 reconcileChildren @ react-dom.development.js:16897 updateHostComponent @ react-dom.development.js:17437 beginWork @ react-dom.development.js:18762 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 beginWork$1 @ react-dom.development.js:23338 performUnitOfWork @ react-dom.development.js:22289 workLoopSync @ react-dom.development.js:22265 performSyncWorkOnRoot @ react-dom.development.js:21891 (anonymous) @ react-dom.development.js:11224 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 flushSyncCallbackQueueImpl @ react-dom.development.js:11219 flushSyncCallbackQueue @ react-dom.development.js:11207 scheduleUpdateOnFiber @ react-dom.development.js:21334 enqueueSetState @ react-dom.development.js:12774 Component.setState @ react.development.js:557 _callee$ @ App.js:177 tryCatch @ polyfill.min.js:1 invoke @ polyfill.min.js:1 t. @ polyfill.min.js:1 asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 (anonymous) @ App.js:5 (anonymous) @ App.js:5 loadData @ App.js:190 componentDidMount @ App.js:145 commitLifeCycles @ react-dom.development.js:19949 commitLayoutEffects @ react-dom.development.js:22938 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 commitRootImpl @ react-dom.development.js:22676 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 commitRoot @ react-dom.development.js:22516 finishSyncRender @ react-dom.development.js:21942 performSyncWorkOnRoot @ react-dom.development.js:21928 scheduleUpdateOnFiber @ react-dom.development.js:21323 updateContainer @ react-dom.development.js:24508 (anonymous) @ react-dom.development.js:24893 unbatchedUpdates @ react-dom.development.js:22038 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892 render @ react-dom.development.js:24975 (anonymous) @ App.js:221 react-dom.development.js:13548 Uncaught Error: Objects are not valid as a React child (found: Tue Jun 16 2020 00:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead. in td (created by IssueRow) in tr (created by IssueRow) in IssueRow (created by IssueTable) in tbody (created by IssueTable) in table (created by IssueTable) in IssueTable (created by IssueList) in IssueList at throwOnInvalidObjectType (react-dom.development.js:13548) at reconcileChildFibers (react-dom.development.js:14448) at reconcileChildren (react-dom.development.js:16897) at updateHostComponent (react-dom.development.js:17437) at beginWork (react-dom.development.js:18762) at HTMLUnknownElement.callCallback (react-dom.development.js:182) at Object.invokeGuardedCallbackDev (react-dom.development.js:231) at invokeGuardedCallback (react-dom.development.js:286) at beginWork$1 (react-dom.development.js:23338) at performUnitOfWork (react-dom.development.js:22289) throwOnInvalidObjectType @ react-dom.development.js:13548 reconcileChildFibers @ react-dom.development.js:14448 reconcileChildren @ react-dom.development.js:16897 updateHostComponent @ react-dom.development.js:17437 beginWork @ react-dom.development.js:18762 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 beginWork$1 @ react-dom.development.js:23338 performUnitOfWork @ react-dom.development.js:22289 workLoopSync @ react-dom.development.js:22265 performSyncWorkOnRoot @ react-dom.development.js:21891 (anonymous) @ react-dom.development.js:11224 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 flushSyncCallbackQueueImpl @ react-dom.development.js:11219 flushSyncCallbackQueue @ react-dom.development.js:11207 scheduleUpdateOnFiber @ react-dom.development.js:21334 enqueueSetState @ react-dom.development.js:12774 Component.setState @ react.development.js:557 _callee$ @ App.js:177 tryCatch @ polyfill.min.js:1 invoke @ polyfill.min.js:1 t. @ polyfill.min.js:1 asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 (anonymous) @ App.js:5 (anonymous) @ App.js:5 loadData @ App.js:190 componentDidMount @ App.js:145 commitLifeCycles @ react-dom.development.js:19949 commitLayoutEffects @ react-dom.development.js:22938 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 commitRootImpl @ react-dom.development.js:22676 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 commitRoot @ react-dom.development.js:22516 finishSyncRender @ react-dom.development.js:21942 performSyncWorkOnRoot @ react-dom.development.js:21928 scheduleUpdateOnFiber @ react-dom.development.js:21323 updateContainer @ react-dom.development.js:24508 (anonymous) @ react-dom.development.js:24893 unbatchedUpdates @ react-dom.development.js:22038 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892 render @ react-dom.development.js:24975 (anonymous) @ App.js:221 react-dom.development.js:13548 Uncaught Error: Objects are not valid as a React child (found: Sun Aug 16 2020 00:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead. in td (created by IssueRow) in tr (created by IssueRow) in IssueRow (created by IssueTable) in tbody (created by IssueTable) in table (created by IssueTable) in IssueTable (created by IssueList) in IssueList at throwOnInvalidObjectType (react-dom.development.js:13548) at reconcileChildFibers (react-dom.development.js:14448) at reconcileChildren (react-dom.development.js:16897) at updateHostComponent (react-dom.development.js:17437) at beginWork (react-dom.development.js:18762) at HTMLUnknownElement.callCallback (react-dom.development.js:182) at Object.invokeGuardedCallbackDev (react-dom.development.js:231) at invokeGuardedCallback (react-dom.development.js:286) at beginWork$1 (react-dom.development.js:23338) at performUnitOfWork (react-dom.development.js:22289) throwOnInvalidObjectType @ react-dom.development.js:13548 reconcileChildFibers @ react-dom.development.js:14448 reconcileChildren @ react-dom.development.js:16897 updateHostComponent @ react-dom.development.js:17437 beginWork @ react-dom.development.js:18762 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 beginWork$1 @ react-dom.development.js:23338 performUnitOfWork @ react-dom.development.js:22289 workLoopSync @ react-dom.development.js:22265 performSyncWorkOnRoot @ react-dom.development.js:21891 (anonymous) @ react-dom.development.js:11224 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 flushSyncCallbackQueueImpl @ react-dom.development.js:11219 flushSyncCallbackQueue @ react-dom.development.js:11207 scheduleUpdateOnFiber @ react-dom.development.js:21334 enqueueSetState @ react-dom.development.js:12774 Component.setState @ react.development.js:557 _callee$ @ App.js:177 tryCatch @ polyfill.min.js:1 invoke @ polyfill.min.js:1 t. @ polyfill.min.js:1 asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 (anonymous) @ App.js:5 (anonymous) @ App.js:5 loadData @ App.js:190 componentDidMount @ App.js:145 commitLifeCycles @ react-dom.development.js:19949 commitLayoutEffects @ react-dom.development.js:22938 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 commitRootImpl @ react-dom.development.js:22676 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 commitRoot @ react-dom.development.js:22516 finishSyncRender @ react-dom.development.js:21942 performSyncWorkOnRoot @ react-dom.development.js:21928 scheduleUpdateOnFiber @ react-dom.development.js:21323 updateContainer @ react-dom.development.js:24508 (anonymous) @ react-dom.development.js:24893 unbatchedUpdates @ react-dom.development.js:22038 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892 render @ react-dom.development.js:24975 (anonymous) @ App.js:221 3react_devtools_backend.js:2273 The above error occurred in the component: in td (created by IssueRow) in tr (created by IssueRow) in IssueRow (created by IssueTable) in tbody (created by IssueTable) in table (created by IssueTable) in IssueTable (created by IssueList) in IssueList

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. overrideMethod @ react_devtools_backend.js:2273 logCapturedError @ react-dom.development.js:19662 logError @ react-dom.development.js:19699 update.callback @ react-dom.development.js:20843 callCallback @ react-dom.development.js:12625 commitUpdateQueue @ react-dom.development.js:12646 commitLifeCycles @ react-dom.development.js:20018 commitLayoutEffects @ react-dom.development.js:22938 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 commitRootImpl @ react-dom.development.js:22676 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 commitRoot @ react-dom.development.js:22516 finishSyncRender @ react-dom.development.js:21942 performSyncWorkOnRoot @ react-dom.development.js:21928 (anonymous) @ react-dom.development.js:11224 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 flushSyncCallbackQueueImpl @ react-dom.development.js:11219 flushSyncCallbackQueue @ react-dom.development.js:11207 scheduleUpdateOnFiber @ react-dom.development.js:21334 enqueueSetState @ react-dom.development.js:12774 Component.setState @ react.development.js:557 _callee$ @ App.js:177 tryCatch @ polyfill.min.js:1 invoke @ polyfill.min.js:1 t. @ polyfill.min.js:1 asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 Promise.then (async) asyncGeneratorStep @ App.js:3 _next @ App.js:5 (anonymous) @ App.js:5 (anonymous) @ App.js:5 loadData @ App.js:190 componentDidMount @ App.js:145 commitLifeCycles @ react-dom.development.js:19949 commitLayoutEffects @ react-dom.development.js:22938 callCallback @ react-dom.development.js:182 invokeGuardedCallbackDev @ react-dom.development.js:231 invokeGuardedCallback @ react-dom.development.js:286 commitRootImpl @ react-dom.development.js:22676 unstable_runWithPriority @ react.development.js:2685 runWithPriority$1 @ react-dom.development.js:11174 commitRoot @ react-dom.development.js:22516 finishSyncRender @ react-dom.development.js:21942 performSyncWorkOnRoot @ react-dom.development.js:21928 scheduleUpdateOnFiber @ react-dom.development.js:21323 updateContainer @ react-dom.development.js:24508 (anonymous) @ react-dom.development.js:24893 unbatchedUpdates @ react-dom.development.js:22038 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24892 render @ react-dom.development.js:24975 (anonymous) @ App.js:221 react-dom.development.js:242 Uncaught (in promise) Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information. at Object.invokeGuardedCallbackDev (react-dom.development.js:242) at invokeGuardedCallback (react-dom.development.js:286) at beginWork$1 (react-dom.development.js:23338) at performUnitOfWork (react-dom.development.js:22289) at workLoopSync (react-dom.development.js:22265) at performSyncWorkOnRoot (react-dom.development.js:21891) at react-dom.development.js:11224 at unstable_runWithPriority (react.development.js:2685) at runWithPriority$1 (react-dom.development.js:11174) at flushSyncCallbackQueueImpl (react-dom.development.js:11219)`

Here is server.js

`const fs = require('fs'); const express = require("express"); const { ApolloServer } = require('apollo-server-express'); const { GraphQLScalarType } = require('graphql');

let aboutMessage = "Issue Tracker API v1.0";

const issuesDB = [ { id: 1, status: 'New', owner: 'Ravan', effort: 5, created: new Date(2020, 08, 23), due: undefined, title: 'Error in console when clicking Add', }, { id: 2, status: 'Assigned', owner: 'Eddie', effort: 14, created: new Date(2020, 05, 16), due: new Date(2020, 07, 16), title: 'Missing bottom border on panel', }, ];

const GraphQLDate = new GraphQLScalarType ({ name: 'GraphQLDate', description: 'A Date() type in GraphQL as a scalar', serialize(value) { return value.toISOString(); }, });

const resolvers = { Query: { about: () => aboutMessage, issueList, }, Mutation: { setAboutMessage, issueAdd }, GraphQLDate, };

function setAboutMessage(_, { message }) { return aboutMessage = message; }

function issueAdd(_, { issue }) { issue.created = new Date(); issue.id = issuesDB.length + 1; if(issue.status == undefined) issue.status = 'New'; issuesDB.push(issue); return issue; }

function issueList() { return issuesDB; }

//configure the apollo server const server = new ApolloServer({ typeDefs: fs.readFileSync('./server/schema.graphql', 'utf-8'), resolvers });

const app = express();

//const fileServerMiddleware = express.static('public'); app.use(express.static("public"));

server.applyMiddleware({ app, path: '/graphql' });

app.listen(3000, function () { console.log("App started on port 3000"); }); `

And here is App.jsx

`const dateRegex = new RegExp('^\d\d\d\d-\d\d-\d\d');

function jsonDateReviver(key, value) { if (dateRegex.test(value)) return new Date(value); return value; }

class IssueFilter extends React.Component { render() { return

This is a placeholder for the issue filter.
; } }

function IssueRow(props) {

const issue = props.issue; return (

{issue.id} {issue.status} {issue.owner} {issue.created} {issue.effort} {issue.due ? issue.due : ' '} {issue.title}

);

}

function IssueTable(props) { const issueRows = props.issues.map((issue) => (

)); return (

{issueRows}
ID Status Owner Created Effort Due Date Title

);

}

class IssueAdd extends React.Component { constructor() { super(); this.handleSubmit = this.handleSubmit.bind(this); }

handleSubmit(e) { e.preventDefault(); const form = document.forms.issueAdd; const issue = { owner: form.owner.value, title: form.title.value, status: 'New', } this.props.createIssue(issue); form.owner.value = ""; form.title.value = ""; }

render() { return ( <form name="issueAdd" onSubmit={ this.handleSubmit }>

    <input type="text" name="title" placeholder="Title" />
    <button>Add</button> 
  </form>
);

} }

class IssueList extends React.Component { constructor() { super(); this.state = { issues: [] }; this.createIssue = this.createIssue.bind(this); }

componentDidMount() { this.loadData(); }

async loadData() { const query = query { issueList { id title status owner created effort due } };

const response = await fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query })
});

const body = await response.text();
const result = JSON.parse(body, jsonDateReviver);
//const result = await response.json();
this.setState({ issues: result.data.issueList });

}

createIssue(issue) { issue.id = this.state.issues.length + 1; issue.created = new Date(); const newIssueList = this.state.issues.slice(); newIssueList.push(issue); this.setState({ issues: newIssueList }); }

render() { return (

Issue Tracker

 ); } } const element = ; ReactDOM.render(element, document.getElementById("content")); ` **And the schema** `scalar GraphQLDate type Query { about: String! issueList: [Issue!]! } type Mutation { setAboutMessage(message: String!): String issueAdd(issue: IssueInputs!): Issue! } type User { name: String } type Issue { id: Int! title: String! status: String! owner: String effort: Int created: GraphQLDate! due: GraphQLDate } "Toned Down Issue, used as inputs, without server generated values" input IssueInputs { title: String! "Optional, if not supplied, will be set to 'New'" status: String owner: String effort: Int due: GraphQLDate }` Sorry about the lenght. Any direction would be appreciated. Thanks
petelc commented 4 years ago

I solved this with the help of another reader. I was missing a back tick