Lift-off i: basics

Help
1

Hello Comunity,

I am new to graphql, I almost complete lift off 1, I have some issue. Kindly help me.

In useQuery tutorial of first part, my server and client are running succesfully but i am getting error when using useQuery(TRACKS)

I mean , error is coming and im loggin its msg but in tutorial it doesnt happen.

const Tracks = () => {
  const {loading, data, error} = useQuery(TRACKS);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  return <Layout grid>{JSON.stringify(data)}</Layout>;
};

THis is the error i am gettng displayed

Error! Unexpected token < in JSON at position 0
2

Hi @Ariv! Thanks for taking our Lift-off I course!

It looks like some kind of syntax error happening somewhere. First, let’s see if the server is running and returning a response properly.

With your server running and Apollo Studio Explorer up, can you run this query? Here’s the lesson on how to do that if you need a refresher.

query getTracks {
  tracksForHome {
    id
    title
    thumbnail
    length
    modulesCount
    author {
      id
      name
      photo
    }
  }
}

What response do you get back?

If that is giving you some data back, then that means the server is all good to go, so the error might be happening on the client side.

Let me know what the server responds with and we can go from there :slight_smile:

3

I have the same issue. The response from the server is following:

{
  "data": {
    "tracksForHome": [
      {
        "id": "track_01",
        "title": "Astro Kitty, space Explorer",
        "thumbnail": "https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg",
        "length": 1210,
        "modulesCount": 6,
        "author": {
          "id": "c313a49c-c410-48d2-b322-ec6d5a93bcbf",
          "name": "Grumpy Cat",
          "photo": "https://res.cloudinary.com/dety84pbu/image/upload/v1606816219/kitty-veyron-sm_mctf3c.jpg"
        }
      },
      {
        "id": "track_01",
        "title": "Astro Kitty, space Explorer",
        "thumbnail": "https://res.cloudinary.com/dety84pbu/image/upload/v1598465568/nebula_cat_djkt9r.jpg",
        "length": 1210,
        "modulesCount": 6,
        "author": {
          "id": "c313a49c-c410-48d2-b322-ec6d5a93bcbf",
          "name": "Grumpy Cat",
          "photo": "https://res.cloudinary.com/dety84pbu/image/upload/v1606816219/kitty-veyron-sm_mctf3c.jpg"
        }
      }
    ]
  }
}
4

In my case the problem have been fixed by adding "proxy": "http://localhost:4000" at the end of the ./client/package.json file. See this answer on SO.