🚧 Implement 2 to master (v0.2.0)

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+      ["@babel/preset-env",{"targets": {"node": "current"}}],
+      "@babel/preset-typescript"
+  ],
+  "plugins": [
+      "@babel/plugin-syntax-bigint",
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-proposal-optional-chaining"
+  ]
+}

package.json

@@ -1,12 +1,15 @@
 {
   "name": "snek-client",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Enoy it.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx tsc"
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "build": "npm run build:types && npm run build:js",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline"
   },
   "files": [
     "lib",
@@ -24,17 +27,23 @@
   },
   "homepage": "https://github.com/snek-at/client#readme",
   "dependencies": {
-    "apollo-cache-inmemory": "^1.6.5",
-    "apollo-client": "^2.6.8",
-    "apollo-link-http": "^1.5.16",
-    "graphql": "^14.6.0",
+    "@apollo/client": "^3.1.5",
+    "@types/node": "^14.14.10",
+    "apollo-upload-client": "^14.1.1",
+    "graphql": "^14.7.0",
     "graphql-tag": "^2.10.3",
     "js-cookie": "^2.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/cli": "^7.12.8",
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+    "@babel/plugin-syntax-bigint": "^7.8.3",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-typescript": "^7.12.7",
+    "@types/apollo-upload-client": "^14.1.0",
     "@types/js-cookie": "^2.2.6",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.7"
   }
 }

src/config.json

@@ -0,0 +1,6 @@
+{
+  "anonUser": {
+    "username": "cisco",
+    "password": "ciscocisco"
+  }
+}

src/endpoints/apollo.ts

@@ -1,20 +1,15 @@
 //#region > Imports
-//#PACKAGE "apollo-client"
-//## npm install "apollo-client"@2.6.8
-// Contains the client for graphql handling
-import { ApolloClient } from "apollo-client";
-//#PACKAGE "apollo-link-http"
-//## npm install "apollo-link-http"@1.5.16
-// Contains the link for the apollo client
-import { HttpLink } from "apollo-link-http";
-//#PACKAGE "apollo-cache-inmemory"
-//## npm install "apollo-cache-inmemory"@1.6.5
-// Contains cache handling for apollo
+//#PACKAGE "@apollo/client"
 import {
+  ApolloClient,
+  ApolloLink,
   InMemoryCache,
-  IntrospectionFragmentMatcher,
   NormalizedCacheObject,
-} from "apollo-cache-inmemory";
+  HttpLink,
+} from "@apollo/client";
+//#PACKAGE "'apollo-upload-client"
+// Contains the link for the apollo client
+import { createUploadLink } from "apollo-upload-client";
 //#PACKAGE "graphql"
 //## npm install "graphql"@14.6.0
 // Contains the interface for gql queries, mutations and subscriptions
@@ -32,7 +27,7 @@ import { ApolloResult } from "./index";
 /** @class Apollo client for graphql handling */
 class Apollo implements ApolloEndpoint {
   //> Fields
-  private link: HttpLink;
+  private link: ApolloLink;
   private cache: InMemoryCache;
   private client: ApolloClient<NormalizedCacheObject>;
 
@@ -49,26 +44,18 @@ class Apollo implements ApolloEndpoint {
    */
   constructor(uri: string, options: Options) {
     this.headers = options.headers;
-    const fragmentMatcher = new IntrospectionFragmentMatcher({
-      introspectionQueryResultData: {
-        __schema: {
-          types: [],
-        },
-      },
-    });
 
     try {
-      this.cache = new InMemoryCache({ fragmentMatcher });
+      this.cache = new InMemoryCache();
     } catch {
       //#ERROR
       throw new Error("An error occurred while initializing the cache!");
     }
 
     try {
-      this.link = new HttpLink({
-        uri,
-        headers: options.headers,
-      });
+      const uploadLink = createUploadLink({ uri, headers: options.headers });
+
+      this.link = ApolloLink.from([uploadLink]);
     } catch {
       //#ERROR
       throw new Error("An error occurred while initializing the API link!");

src/endpoints/index.ts

@@ -4,8 +4,7 @@
 //## npm install "graphql"@14.6.0
 // Contains the interface for gql queries, mutations and subscriptions
 import { DocumentNode } from "graphql";
-import { FetchResult } from "apollo-link";
-import { ApolloQueryResult } from "apollo-client";
+import { ApolloQueryResult, FetchResult } from "@apollo/client";
 //#endregion
 
 //#region > Types
@@ -75,21 +74,21 @@ interface ScraperEndpoint extends Endpoint {
   /**
    * GetJson: A method which gets json data from a specific url.
    *
-   * @param url A web url
+   * @param path Path to the endpoint
    * @returns {Promise<T>} Json data in the given format <T>
    */
   getJson<T>(url: string): Promise<T>;
   /**
    * GetDom: A method which gets DOM data from a specific url.
    *
-   * @param url A web url
+   * @param path Path to the endpoint
    * @returns {Promise<Document>} A DOM Document
    */
   getDom(url: string): Promise<Document>;
   /**
    * Post: A method to post data to a specific url.
    *
-   * @param {string} url A web url
+   * @param {string} path Path to the endpoint
    * @param data Data which is filled into the body of a post request
    * @returns {Promise<Document>} A DOM Document
    */
@@ -106,6 +105,52 @@ interface ScraperEndpoint extends Endpoint {
       | null
       | undefined
   ): Promise<T>;
+  /**
+   * Send fetch request to a endpoint and get the respective result.
+   *
+   * @param {string} path Path to the endpoint. Specify it like "/foo/bar".
+   *                      The correct placement of the slashes is essential!
+   * @param {"GET" | "POST" | "PUT" | "PATCH" | "DELETE"} type HTTP methods
+   * @param data Data which is filled into the body of a post request
+   * @returns {Promise<Response>} A DOM Document
+   */
+  fetch(
+    path: string,
+    type: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
+    data?:
+      | string
+      | Blob
+      | ArrayBufferView
+      | ArrayBuffer
+      | FormData
+      | URLSearchParams
+      | ReadableStream<Uint8Array>
+      | null
+      | undefined
+  ): Promise<Response>;
+  /**
+   * Send fetch request to a endpoint and get the respective JSON result.
+   *
+   * @param {string} path Path to the endpoint. Specify it like "/foo/bar".
+   *                      The correct placement of the slashes is essential!
+   * @param {"GET" | "POST" | "PUT" | "PATCH" | "DELETE"} type HTTP methods
+   * @param data Data which is filled into the body of a post request
+   * @returns {Promise<Response>} A DOM Document
+   */
+  fetchJson<T>(
+    path: string,
+    type: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
+    data?:
+      | string
+      | Blob
+      | ArrayBufferView
+      | ArrayBuffer
+      | FormData
+      | URLSearchParams
+      | ReadableStream<Uint8Array>
+      | null
+      | undefined
+  ): Promise<T>;
 }
 //#endregion
 

src/endpoints/scraper.ts

@@ -69,22 +69,9 @@ class Scraper implements ScraperEndpoint {
    * @returns {object} DOM object
    */
   async getDom(path: string): Promise<Document> {
-    return fetch(this.url + path, {
-      headers: {
-        ...this.headers,
-      },
-    })
-      .then((response) => {
-        if (!response.ok) {
-          //#ERROR
-          throw new Error(response.statusText);
-        }
-
-        return response.text();
-      })
-      .then((text) => {
-        return new DOMParser().parseFromString(text, "text/html");
-      });
+    const text = await (await this.fetch(path, "GET")).text();
+
+    return new DOMParser().parseFromString(text, "text/html");
   }
 
   /**
@@ -123,6 +110,78 @@ class Scraper implements ScraperEndpoint {
       return response.json().then((data) => data as T);
     });
   }
+
+  /**
+   * Send fetch request to a endpoint and get the respective result.
+   *
+   * @param {string} path Path to the endpoint. Specify it like "/foo/bar".
+   *                      The correct placement of the slashes is essential!
+   * @param {"GET" | "POST" | "PUT" | "PATCH" | "DELETE"} type HTTP methods
+   * @param data Data which is filled into the body of a post request
+   * @returns {Promise<Response>} A DOM Document
+   */
+  async fetch(
+    path: string,
+    type: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
+    data?:
+      | string
+      | Blob
+      | ArrayBufferView
+      | ArrayBuffer
+      | FormData
+      | URLSearchParams
+      | ReadableStream<Uint8Array>
+      | null
+      | undefined
+  ): Promise<Response> {
+    return fetch(this.url + path, {
+      method: type,
+      body: data,
+      headers: {
+        ...this.headers,
+      },
+    }).then(async (response) => {
+      if (!response.ok) {
+        //#ERROR
+        throw new Error(response.statusText);
+      }
+
+      return response;
+    });
+  }
+
+  /**
+   * Send fetch request to a endpoint and get the respective JSON result.
+   *
+   * @param {string} path Path to the endpoint. Specify it like "/foo/bar".
+   *                      The correct placement of the slashes is essential!
+   * @param {"GET" | "POST" | "PUT" | "PATCH" | "DELETE"} type HTTP methods
+   * @param data Data which is filled into the body of a post request
+   * @returns {Promise<Response>} A DOM Document
+   */
+  async fetchJson<T>(
+    path: string,
+    type: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
+    data?:
+      | string
+      | Blob
+      | ArrayBufferView
+      | ArrayBuffer
+      | FormData
+      | URLSearchParams
+      | ReadableStream<Uint8Array>
+      | null
+      | undefined
+  ): Promise<T> {
+    return this.fetch(path, type, data).then(async (response) => {
+      if (!response.ok) {
+        //#ERROR
+        throw new Error(response.statusText);
+      }
+
+      return response.json().then((data) => data as T);
+    });
+  }
 }
 //#endregion