Giters

theimpossibleastronaut / howmuchisthe.fish

Lyrical madness from the brains of H.P. Baxxter in the form of a JSON API.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

GraphQL API

ivdma opened this issue · comments

commented

Hello Sir,

With all the new technologies, like GraphQL, I as a not-so-regular consumer of your tremendous data, would like to propose to move your API standard from REST to queryable GraphQL API.

Proposed structure:

type Query {
  random: Quote!
  video: Video!
  daily: Quote!
  quote(id: ID!): Quote!
}

type Quote {
  id: ID!
  name: String!
  text: String!
  track: String!
  album: String!
  year: Int!
  album_information: String!
  album_cover: String!
  album_thumb: String!
  releasedate: Int!
  track_cover: String!
  track_thumb: String!
  track_master: String!
  videos: [Video]
}

type Video {
  title: String!,
  link: String!
}

One can then query like following:

query {
  random {
    text
    videos {
      title
      link
    }
  }
}

with a result like:

{
  "data": {
    "random": {
      "text": "Before success can manifest. You've got to go through the learning process.",
      "videos": [
        {
          "title": "Scooter - Faster Harder Scooter (Official Video HQ)",
          "link": "http:\/\/www.youtube.com\/watch?v=j0LD2GnxmKU"
        }
      ]
    }
  }
}

Pro's

It'll save me some data 😜

commented

Sounds like a plan. I've never worked with GraphQL before, but it seems like an easy enough job.
I'll probably want to take it on myself to learn this new thing. Thanks for the proposed structure, that helps get things started.

Some apps are depending on the REST structure now though, so it's going to be dual stack then. Is there a default endpoint to query GraphQL at?

commented

By default GraphQL uses a POST /graphql enpoint for all queries.

commented

@ivdma I haven't updated the site yet, and I've made some minor changes to your proposed schema.
The first iteration that implements all your proposed functions is live at https://howmuchisthe.fish/graphql and it's schema is also served on /schema.gql.

Please give it a try, and I'll update the webpage accordingly.
Please note, I haven't yet implemented the text generation into the GraphQL variant.

scalar Date

type Query {
  random: Quote!
  video: Video!
  daily: Quote!
  quote(id: ID!): Quote!
}

type Quote {
  id: ID!
  permalink: String!
  hash: String!
  text: String!
  track: String!
  album: String!
  year: Int!
  album_information: String!
  album_cover: String!
  album_thumb: String!
  releasedate: Date!

  # Track data is optional
  track_cover: String
  track_thumb: String
  track_master: String

  # Not all data has videos avaialable
  videos: [Video]
}

type Video {
  title: String!,
  link: String!
}
commented

Cool!
I tried, but getting rejected by CORS.
screenshot

Maybe this might help: https://www.prisma.io/blog/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d

commented

Oh, and this is the client: https://github.com/ivdma/react.fish

commented

Hmm, thats funny, because I already set the header properly;
https://github.com/theimpossibleastronaut/howmuchisthe.fish/blob/master/app.js line 259. Which works for the REST api as well.

I'll check out your client to test and investigate. Because curl and insomnia ofcourse won't have this issue.

martijndeboer>curl -i -X POST -H "Content-Type: application/json" -d "{ \"query\": \"{ random { text track } }\" }" https://howmuchisthe.fish/graphql
HTTP/1.1 200 OK
Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD
Access-Control-Allow-Origin: *
Content-Length: 148
Content-Type: application/json
Date: Wed, 16 Jan 2019 12:37:13 GMT
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-Xss-Protection: 1; mode=block

{"data":{"random":{"text":"Your last release was anything but a seller. And your microphone fears the word accapella!","track":"Imaginary battle"}}}

It does seem to have the proper headers set tho.

commented

Ah the problem is the OPTIONS request. I just handle GET for rest and POST for GraphQL. Let me see what the request needs and if I can add that.

commented

@ivdma I've deployed a fix that accepts and replies to the OPTIONS request. The react app seems to work with it.

But holy crap batman.

added 2025 packages from 791 contributors and audited 35836 packages in 46.31s

And people thought DLL-hell was bad on Windows..

commented

And people thought DLL-hell was bad on Windows..

🤣

commented

I've updated the site (in all it's basic glory!) with a reference to the graphql endpoint and a printed version of the schema therefore closing this issue.

commented