React + Apollo "Getting Started" Error in Prisma Playground

[arnaugomez]

I am in te Getting Started React + Apollo chapter: https://www.howtographql.com/react-apollo/1-getting-started/

When I enter the following query in the Prisma Playground (as the tutorial tells me to do):

mutation CreatePrismaLink {
  post(
    description: "Prisma gives you a powerful database toolkit 😎"
    url: "https://prisma.io"
  ) {
    id
  }
}

mutation CreateApolloLink {
  post(
    description: "The best GraphQL client for React"
    url: "https://www.apollographql.com/docs/react/"
  ) {
    id
  }
}

I get this error message that I don't understand. It seems to be something about the server.

{
  "errors": [
    {
      "message": "Argument id for data.postedBy.connect.id must not be null. Please use undefined instead.\n",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "post"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "clientVersion": "2.12.1",
          "stacktrace": [
            "Error: Argument id for data.postedBy.connect.id must not be null. Please use undefined instead.",
            "",
            "    at Document.validate (/Users/arnau/Desktop/DEV PROJECTS/hackernews-react-apollo/server/node_modules/@prisma/client/runtime/index.js:77413:19)",
            "    at NewPrismaClient._executeRequest (/Users/arnau/Desktop/DEV PROJECTS/hackernews-react-apollo/server/node_modules/@prisma/client/runtime/index.js:79065:17)",
            "    at /Users/arnau/Desktop/DEV PROJECTS/hackernews-react-apollo/server/node_modules/@prisma/client/runtime/index.js:79002:52",
            "    at AsyncResource.runInAsyncScope (async_hooks.js:186:9)",
            "    at NewPrismaClient._request (/Users/arnau/Desktop/DEV PROJECTS/hackernews-react-apollo/server/node_modules/@prisma/client/runtime/index.js:79002:25)",
            "    at Object.then (/Users/arnau/Desktop/DEV PROJECTS/hackernews-react-apollo/server/node_modules/@prisma/client/runtime/index.js:79119:39)",
            "    at processTicksAndRejections (internal/process/task_queues.js:97:5)"
          ]
        }
      }
    }
  ],
  "data": null
}

[gokulyc]

I am also getting same error.

[HangCcZ]

Please check howtographql/react-apollo#110 and see if it helps.

[jackachan]

howtographql/react-apollo#110

The workaround works!

[HangCcZ]

Glad it helped, enjoy GraphQL ride :D

[arnaugomez]

Thanks!

[charbelcs123]

You missed that part

From the server’s response, copy the authentication token and open another tab in the Playground. Inside that new tab, open the HTTP HEADERS pane in the bottom-left corner and specify the Authorization header. Replace the TOKEN placeholder in the following snippet with the copied token.