Issue when retrieving sprites with GraphQL

[simonorono]

Hi. I've been playing around with the GraphQL API and I can't find a way to retrieve Pokemon along with their sprites.

This is the query I'm using, but I'm getting every Sprite as null:

query pokemon {
  pokemon_v2_pokemonspecies(where: {pokemon_v2_pokemondexnumbers: {pokemon_v2_pokedex: {name: {_eq: "kanto"}}}}) {
    id
    name
    pokemon_v2_pokemons {
      pokemon_v2_pokemonsprites {
        sprites
      }
    }
  }
}

One result from this query is this:

{
  "data": {
    "pokemon_v2_pokemonspecies": [
      {
        "id": 1,
        "name": "bulbasaur",
        "pokemon_v2_pokemons": [
          {
            "pokemon_v2_pokemonsprites": [
              {
                "sprites": "{\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null, \"back_default\": null, \"back_female\": null, \"back_shiny\": null, \"back_shiny_female\": null, \"other\": {\"dream_world\": {\"front_default\": null, \"front_female\": null}, \"official-artwork\": {\"front_default\": null}}, \"versions\": {\"generation-i\": {\"red-blue\": {\"front_default\": null, \"front_gray\": null, \"back_default\": null, \"back_gray\": null}, \"yellow\": {\"front_default\": null, \"front_gray\": null, \"back_default\": null, \"back_gray\": null}}, \"generation-ii\": {\"crystal\": {\"front_default\": null, \"front_shiny\": null, \"back_default\": null, \"back_shiny\": null}, \"gold\": {\"front_default\": null, \"front_shiny\": null, \"back_default\": null, \"back_shiny\": null}, \"silver\": {\"front_default\": null, \"front_shiny\": null, \"back_default\": null, \"back_shiny\": null}}, \"generation-iii\": {\"emerald\": {\"front_default\": null, \"front_shiny\": null}, \"firered-leafgreen\": {\"front_default\": null, \"front_shiny\": null, \"back_default\": null, \"back_shiny\": null}, \"ruby-sapphire\": {\"front_default\": null, \"front_shiny\": null, \"back_default\": null, \"back_shiny\": null}}, \"generation-iv\": {\"diamond-pearl\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null, \"back_default\": null, \"back_female\": null, \"back_shiny\": null, \"back_shiny_female\": null}, \"heartgold-soulsilver\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null, \"back_default\": null, \"back_female\": null, \"back_shiny\": null, \"back_shiny_female\": null}, \"platinum\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null, \"back_default\": null, \"back_female\": null, \"back_shiny\": null, \"back_shiny_female\": null}}, \"generation-v\": {\"black-white\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null, \"back_default\": null, \"back_female\": null, \"back_shiny\": null, \"back_shiny_female\": null, \"animated\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null, \"back_default\": null, \"back_female\": null, \"back_shiny\": null, \"back_shiny_female\": null}}}, \"generation-vi\": {\"omegaruby-alphasapphire\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null}, \"x-y\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null}}, \"generation-vii\": {\"ultra-sun-ultra-moon\": {\"front_default\": null, \"front_female\": null, \"front_shiny\": null, \"front_shiny_female\": null}, \"icons\": {\"front_default\": null, \"front_female\": null}}, \"generation-viii\": {\"icons\": {\"front_default\": null, \"front_female\": null}}}}"
              }
            ]
          }
        ]
      }
    ]
  }
}

Two things:

1. all sprites are null
2. rather than being part of the JSON response, the sprites are returned in a string containing another JSON document.

Am I doing something wrong or is it this a bug?

[Naramsim]

It's a bug. Currently, the sprites are the only non-working thing in the graphql engine. It's because we don't have a Postgres table for them.

[brunocordioli072]

Is there any updates on the issue? I'm having the same problem...

[Naramsim]

No updates

I tried locally but then I had no time and didn't continue

[MiroStW]

shame :( otherwise its a great graphQL playground! 🙏

[C-Garza]

I ran the same query as @simonorono and I didn't get null for the sprites, I got the paths but the paths before they are serialized:

"sprites": "{\"front_default\": \"/media/sprites/pokemon/1.png\", ...}"

This is just how it appears inside the PokemonSprites model since that model is just a charfield.
We don't use that media substring anywhere from what I can see, except maybe in a few tests. We could just entirely remove that media string and replace it with https://raw.githubusercontent.com/PokeAPI/sprites/master/ in the build file, because that's what we do in the serializers anyway. It'll make that table a bit bigger and it would still be a string, but at least the user could just parse it since it's stored as valid JSON.

[simonorono]

Tested with a fresh clone of the PokeAPI and can confirm this is no longer an issue.

[Naramsim]

Hi @simonorono, No implementation has been made. I feel the issue is still here.

[Naramsim]

@C-Garza , how could you possibly get the sprites' link?

[simonorono]

@Naramsim you're right, I was looking at the regular API 🤦‍♂️.

[C-Garza]

@Naramsim I can't really recall, but if I remember correctly I think I made a mistake because I was doing it on my local machine and it had those sprite links after I ran some kind of step. But I'm pretty sure it shouldn't work still because the sprites don't have their own postgres table or something if I recall.