Issue in "Exploring our first query"

Help
1

While trying to run the first tracksForHome query, I get the below error:

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field Query.tracksForHome.",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "tracksForHome"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "stacktrace": [
            "Error: Cannot return null for non-nullable field Query.tracksForHome.",
            "    at completeValue (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/graphql/execution/execute.js:559:13)",
            "    at resolveField (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/graphql/execution/execute.js:472:19)",
            "    at executeFields (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/graphql/execution/execute.js:292:18)",
            "    at executeOperation (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/graphql/execution/execute.js:236:122)",
            "    at executeImpl (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/graphql/execution/execute.js:116:14)",
            "    at Object.execute (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/graphql/execution/execute.js:60:35)",
            "    at execute (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/apollo-server-core/dist/requestPipeline.js:199:36)",
            "    at Object.processGraphQLRequest (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/apollo-server-core/dist/requestPipeline.js:139:34)",
            "    at processTicksAndRejections (internal/process/task_queues.js:95:5)",
            "    at async processHTTPRequest (/home/hemesh/Projects/odyssey-lift-off-part1/server/node_modules/apollo-server-core/dist/runHttpQuery.js:179:30)"
          ]
        }
      }
    }
  ],
  "data": null
}

I suspect this is because we are returning a null array using the […new Array(6)] to the tracksForHome query which expects a non nullable list of non nullable Tracks object - [Tracks!]!

I’m surprised it even worked in the video. Now I cannot proceed in the course… please help.

2

Hi @hemesh-t !

Thanks for the info! The […new Array(6)] will indeed return an array of undefined objects, by itself. However in this same mocks object, we also included a property for Track that has more mock data. This data will override the undefined objects in the array.

That said, can you paste the contents of your index.js file as well as your schema? Or link to your Github repo if you have it. I’ll see if I can spot what’s happening!

3

Thanks @MichelleMabuyo for the quick response.

Below are the contents of my schema.js and index.js files:

schema.js:

const {gql} = require('apollo-server');

const typeDefs = gql`

type Query {
    "Get tracks array for homepage grid"
    tracksForHome: [Track!]!
  }

"A track is a group of Modules that teaches about a specific topic"
type Track {
    id: ID!
    title: String!
    author: Author!
    thumbnail: String
    length: Int
    modulesCount: Int
}

"Author of a complete Track or a Module"
type Author {
    id: ID!
    name: String!
    photo: String
}
`;
module.exports = typeDefs;

index.js:

const {ApolloServer} = require ('apollo-server');
const typeDefs = require('./schema');

const mocks = {
    Query: () => ({
      tracksForHome: () => [...new Array(6)]
    }),
    Track: () => ({
      id: () => 'track_01',
      title: () => 'Astro Kitty, Space Explorer',
      author: () => {
        return {
            id: 'author_01',
            name: 'Grumpy Cat',
            photo:
            'https://res.cloudinary.com/dety84pbu/image/upload/v1606816219/kitty-veyron-sm_mctf3c.jpg'
        };
      },
      thumbnail: () =>
        'https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg',
      length: () => 1210,
      modulesCount: () => 6
    })
  };


const server = new ApolloServer({
    typeDefs,
    mock: mocks
});

server.listen().then(() => {
    console.log(`
      🚀  Server is running!
      🔉  Listening on port 4000
      đź“­  Query at https://studio.apollographql.com/dev
    `);
  });
4

Thank you! So it looks like you have a typo in the ApolloServer constructor. It should be:

const server = new ApolloServer({
    typeDefs,
    mocks: mocks
});

Note the mocks with an s! You can also shorten it to simply mocks since the key has the same name as the value.

Give it a try and let me know how it goes!

1 Like
5

Ah! Bummer! Thanks @MichelleMabuyo for replying so quick and helping me solve this issue!

It worked now.

Really appreciate it!

6

Typos are sneaky. Happy to hear it’s working now! :partying_face:

Lift-off III goes into a little more detail about the resolver chain we’re using here (ie why did the Track data “override” the tracksForHome data?) but feel free to let us know again if you have any other questions!

1 Like
8

This typo is present in the tutorial videos.

9

Hi @calabiyauman!

I double-checked the lesson and the 2:57 timestamp on the video shows it as mocks with an s. Can you clarify where you’re seeing the typo?

10

Actually the same happens if you use the code from tutorial several steps later. The complete resolver.js file in it is missing the last line - module export. Causes the same error.

11

Hi there @mikocot ! I’m sorry to hear that you’re running into an error. Could you let me know which module of the course you see the problem coming from? I’m happy to take a look!

12

I had the same problem, Thanks Michelle, it was very helpful !

1 Like