feat: add example app for sendGraphQLRequest

thomasheyenbrock · Jan 29, 2022 · 76bb3bd · 76bb3bd
1 parent ae79ea1
commit 76bb3bd
Show file tree

Hide file tree

Showing 16 changed files with 28,843 additions and 0 deletions.
diff --git a/examples/github-explorer/.env.example b/examples/github-explorer/.env.example
@@ -0,0 +1 @@
+GITHUB_TOKEN='ghp_ABC...'
diff --git a/examples/github-explorer/.gitignore b/examples/github-explorer/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/examples/github-explorer/README.md b/examples/github-explorer/README.md
@@ -0,0 +1,10 @@
+# github-explorer
+
+This exmple shows how to use `remix-graphql` to execute GraphQL operations
+against a remote GraphQL API in your loaders and actions. It uses the
+`sendGraphQLRequest` function.
+
+In the example app you can search GitHub users by name and look up their ten
+most starred public repositories. The search query runs in an action function
+that handles a form submission with the string to search by. The query for
+a user and the repos runs in a loader function.
diff --git a/examples/github-explorer/app/entry.client.tsx b/examples/github-explorer/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);
diff --git a/examples/github-explorer/app/entry.server.tsx b/examples/github-explorer/app/entry.server.tsx
@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}
diff --git a/examples/github-explorer/app/graphql/endpoint.server.ts b/examples/github-explorer/app/graphql/endpoint.server.ts
@@ -0,0 +1 @@
+export const endpoint = "https://api.github.com/graphql";
diff --git a/examples/github-explorer/app/graphql/helpers.ts b/examples/github-explorer/app/graphql/helpers.ts
@@ -0,0 +1 @@
+export type ArrayItem<T> = T extends Array<infer S> ? S : never;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const endpoint = "https://api.github.com/graphql";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type ArrayItem<T> = T extends Array<infer S> ? S : never;