Merge pull request #34276 from mike-marcacci/graphql-react

[graphql-react] Add initial type definitions

types/graphql-react/graphql-react-tests.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { GraphQL, GraphQLContext, useGraphQL } from "graphql-react";
+
+const graphql = new GraphQL();
+
+function App() {
+  const { loading, cacheValue } = useGraphQL<
+    {node: null | {id: string}},
+    {id: string}
+  >({
+    fetchOptionsOverride(options) {
+      options.url = "/graphql";
+    },
+    operation: {
+      variables: {
+        id: "123456"
+      },
+      query: `
+        query($id: !String) {
+          node(id: $id) {
+            id
+          }
+        }
+      `
+    }
+  });
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>{
+      cacheValue && cacheValue.data && cacheValue.data.node
+        ? "exists"
+        : "does not exist"
+    }</div>
+  );
+}
+
+function Root() {
+  return (
+    <GraphQLContext.Provider value={graphql}>
+      <App />
+    </GraphQLContext.Provider>
+  );
+}

types/graphql-react/index.d.ts

@@ -0,0 +1,139 @@
+// Type definitions for graphql-react 8.1
+// Project: https://github.com/jaydenseric/graphql-react#readme
+// Definitions by: Mike Marcacci <https://github.com/mike-marcacci>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.3
+
+// The no-unnecessary-generics rule is stupid and overrestrictive. It is a
+// perfectly valid and often useful to type-constrain a wrapping object.
+/* tslint:disable:no-unnecessary-generics */
+
+import { ReactNode, Context } from "react";
+
+export const GraphQLContext: Context<GraphQL>;
+
+export interface HttpError {
+  status: number;
+  statusText: string;
+}
+
+export type GraphQLCacheKey = string;
+export interface GraphQLCacheValue<T> {
+  fetchError: null | string;
+  httpError: null | HttpError;
+  parseError: null | string;
+  graphQLErrors:
+    | null
+    | Array<{
+        message: string;
+        path: string[];
+        locations: Array<{ column: number; line: number }>;
+      }>;
+  data: T;
+}
+
+export interface GraphQLCache {
+  [key: string]: GraphQLCacheValue<any>;
+}
+
+export interface GraphQLFetchOptions {
+  url: string;
+  body: string | FormData;
+  headers: Headers;
+  credentials: null | string;
+}
+
+export type GraphQLFetchOptionsOverride = (
+  options: GraphQLFetchOptions
+) => void;
+
+export type GraphQLOperation<V> = {
+  query: string;
+} & (V extends undefined ? {} : { variables: V });
+
+export interface GraphQLOperationLoading<T> {
+  cacheKey: GraphQLCacheKey;
+  cacheValue: undefined | GraphQLCacheValue<T>;
+  cacheValuePromise: Promise<GraphQLCacheValue<T>>;
+}
+
+export interface GraphQLOperationStatus<T> {
+  load: () => void;
+  loading: boolean;
+  cacheKey: GraphQLCacheKey;
+  cacheValue?: GraphQLCacheValue<T>;
+}
+
+export class GraphQL {
+  constructor(options?: { cache?: GraphQLCache });
+
+  on(
+    type: "reset",
+    handler: (event: { exceptCacheKey: GraphQLCacheKey }) => void
+  ): void;
+
+  on(
+    type: "cache",
+    handler: (event: {
+      cacheKey: GraphQLCacheKey;
+      cacheValue: GraphQLCacheValue<any>;
+    }) => void
+  ): void;
+
+  on(
+    type: "fetch",
+    handler: (event: {
+      cacheKey: GraphQLCacheKey;
+      cacheValuePromise: Promise<GraphQLCacheValue<any>>;
+    }) => void
+  ): void;
+
+  off(
+    type: "reset",
+    handler: (event: { exceptCacheKey: GraphQLCacheKey }) => void
+  ): void;
+
+  off(
+    type: "cache",
+    handler: (event: {
+      cacheKey: GraphQLCacheKey;
+      cacheValue: GraphQLCacheValue<any>;
+    }) => void
+  ): void;
+
+  off(
+    type: "fetch",
+    handler: (event: {
+      cacheKey: GraphQLCacheKey;
+      cacheValuePromise: Promise<GraphQLCacheValue<any>>;
+    }) => void
+  ): void;
+
+  reset(exceptCacheKey?: string): void;
+  operate<T, V>(options: {
+    operation: GraphQLOperation<V>;
+    fetchOptionsOverride?: GraphQLFetchOptionsOverride;
+    reloadOnLoad?: boolean;
+    resetOnLoad?: boolean;
+  }): GraphQLOperationLoading<T>;
+
+  cache: GraphQLCache;
+}
+
+export function reportCacheErrors(event: any): void;
+
+export function ssr(
+  grapphql: GraphQL,
+  node: ReactNode,
+  render?: (element: ReactNode) => string
+): void;
+
+export function useGraphQL<T, V>(options: {
+  fetchOptionsOverride?: GraphQLFetchOptionsOverride;
+  loadOnMount?: boolean;
+  loadOnReload?: boolean;
+  loadOnReset?: boolean;
+  reloadOnLoad?: boolean;
+  resetOnLoad?: boolean;
+  operation: GraphQLOperation<V>;
+}): GraphQLOperationStatus<T>;

types/graphql-react/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react",
+        "esModuleInterop": true
+    },
+    "files": [
+        "index.d.ts",
+        "graphql-react-tests.tsx"
+    ]
+}

types/graphql-react/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }