Full Github REST api in 34 lines of code

github-proxy-client.js

/* Ultra lightweight Github REST Client */
// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
const token = 'github-token-here'
const githubClient = generateAPI('https://api.github.com', {
  headers: {
    'User-Agent': 'xyz',
    'Authorization': `bearer ${token}`
  }
})

async function getRepo() {
  /* GET /repos/{owner}/{repo} */
  return githubClient.repos.davidwells.analytics.get()
}

async function generateRepoFromTemplate({ template, repoName }) {
  /* POST /repos/{template_owner}/{template_repo}/generate */
  return githubClient.repos[`${template}`].generate.post({ name: repoName })          
}

getRepo().then((repoInfo) => {
  console.log('repo', repoInfo)
})

function generateAPI(baseUrl, defaults = {}, scope = []) {
  const callable = () => {}
  callable.url = baseUrl
  return new Proxy(callable, {
    get({ url }, propKey) {
      const method = propKey.toUpperCase()
      const path = scope.concat(propKey)
      if (['GET', 'POST', 'PUT', 'DELETE', 'PATCH'].includes(method)) {
        return (data, overrides = {}) => {
          const payload = { method, ...defaults, ...overrides }
          switch (method) {
            case 'GET': {
              if (data) url = `${url}?${new URLSearchParams(data)}`
              break
            }
            case 'POST':
            case 'PUT':
            case 'PATCH': {
              payload.body = JSON.stringify(data)
            }
          }
          console.log(`Calling: ${url}`)
          console.log('payload', payload)
          return fetch(url, payload).then((d) => d.json())
        }
      }
      return generateAPI(`${url}/${propKey}`, defaults, path)
    },
    apply({ url }, thisArg, [arg] = []) {
      const path = url.split('/')
      return generateAPI(arg ? `${url}/${arg}` : url, defaults, path)
    }
  })
}

@manuganji apply in this context is a wrapper for Proxied original function. Basically we need the callable variable only to use apply on it. If we don't use this feature and stick to githubClient.repos[template].generate.post({ name: repoName }), we could remove the callable and do

return new Proxy({}, {
    get(){ /*...* }
}

there's a doc for that
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply

Any chance that there is a feasible way to create a typed version of this in TypeScript?

Any chance that there is a feasible way to create a typed version of this in TypeScript?

https://github.com/johannschopplich/uncreate

@htunnicliff @About7Deaths @v1vendi I've updated my typed version of this REST API approach uncreate to support all the chaining just like in this example. 🚀

Nice work. I've made something similar, but more generic at https://github.com/SimplyEdit/simplyview/blob/master/js/simply.api.js
Does anyone know of any other similar approaches using Proxy?

Amazing work

This is pretty cool. Also, very similar to something I have been using for a while.

import {objectCopy} from "./objectCopy.js"

const defaults = {
  cache: "no-cache",
  credentials: "same-origin",
  headers: {
    "Content-Type": "application/json",
  },
  mode: "same-origin",
  redirect: "follow",
  referrerPolicy: "no-referrer"
}
const METHODS = [
  "DELETE",
  "GET",
  "HEAD",
  "OPTIONS",
  "PATCH",
  "POST",
  "PUT",
]

function naiveSDK (root, config = {}, fetchAPI = fetch) {
  if (!fetchAPI) {
    throw new Error("No fetch API available.")
  }

  const defaultOptions = {...objectCopy(defaults), ...objectCopy(config)}
  const request = (method) => (route, body, options = {}) => fetchAPI(
    `${root}${route}`,
    {
      ...(body ? {body: JSON.stringify(body)} : {}),
      method,
      options: {...defaultOptions, ...objectCopy(options)},
    },
  )

  return new Proxy(METHODS, {
    get: (all, method) => all.includes(method.toUpperCase())
      ? request(method.toUpperCase())
      : () => {throw new Error(`Invalid HTTP method called: ${method}.`)},
    set (_, prop) {throw new Error(`Attempting to set property "${prop}".`)},
  })
}

export {naiveSDK}