add banner

starters/next/src/models/tests/sampleModel.server.test.ts

@@ -0,0 +1,60 @@
+// TODO: Unskip when updating to jest 28
+import { VulcanGraphqlModel } from "@vulcanjs/graphql";
+import { buildApolloSchema } from "@vulcanjs/graphql/server";
+import { ApolloServer } from "apollo-server-express";
+import { makeExecutableSchema } from "@graphql-tools/schema";
+import gql from "graphql-tag";
+// Import the server version in order to generate the graphql schema
+
+/**
+ * Create an Apollo Server for integration testing of graphql resolvers
+ *
+ * NOTE: this won't run an actual server on localhost:3000/graphql,
+ * it simply returns an Apollo server object
+ *
+ * Use executeOperation method to test queries
+ *
+ * @see https://www.apollographql.com/docs/apollo-server/testing/testing/
+ */
+const createTestApolloServer = async (
+  models: Array<VulcanGraphqlModel>,
+  context: any
+) => {
+  // Build a Vulcan schema just for this model
+  const vulcanRawSchema = buildApolloSchema(models);
+  const vulcanExecutableSchema = makeExecutableSchema(vulcanRawSchema);
+  // Spawn an Apollo server with just this schema
+  const server = new ApolloServer({
+    schema: vulcanExecutableSchema,
+    debug: true,
+    context: {},
+  });
+  await server.start();
+  return server;
+};
+import { SampleModel } from "../sampleModel.server";
+
+// TODO: this test doesn't pass, due to import issues,
+// @see https://stackoverflow.com/questions/70420923/jest-modulenamemapper-and-npm-package-exports
+// Until we fix this, you should test your server using Cypress "cy.request", as we demonstrate here:
+// @see .vn/tests/vn/api/auth.server.test.ts
+test.skip("can resolve a nested field", async () => {
+  const server = await createTestApolloServer([SampleModel], {});
+  const result = server.executeOperation({
+    // You can use GraphQL Playground to build the query and paste it there,
+    // by accessing http://localhost:3000/api/graphql in your browser during dev
+    query: gql`
+      {
+        samples {
+          results {
+            demoResolvedField(
+              someArgument: "someArgumentValue"
+              anotherArgument: 42
+            )
+          }
+        }
+      }
+    `,
+  });
+  expect(result).toEqual([{ demoResolvedField: "todo" }]);
+});

starters/remix/README.md

@@ -1,6 +1,6 @@
 # Vulcan Eurodance Stack
 
-The Remix Eurodance Stack 🇪🇺 🐸 🛵
+![The Remix Eurodance Stack 🇪🇺 🐸 🛵](https://raw.githubusercontent.com/VulcanJS/vulcan-npm/main/docusaurus/static/img/remix/eurodance-banner.jpeg)
 _Based on Remix [Indie Stack](https://github.com/remix-run/indie-stack)_
 
 <!--![The Remix Eurodance Stack](https://repository-images.githubusercontent.com/465928257/a241fa49-bd4d-485a-a2a5-5cb8e4ee0abf)-->

starters/remix/app/routes/distant-api.tsx

@@ -0,0 +1,12 @@
+import { Link, Outlet } from "@remix-run/react";
+
+export default function Root() {
+  return (
+    <div className="distant-api-layout">
+      <header>
+        <Link to="/">Back home</Link>
+      </header>
+      <Outlet />
+    </div>
+  );
+}

starters/remix/app/routes/distant-api/mutation.tsx

@@ -2,7 +2,6 @@ import type { ActionFunction } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
 import * as React from "react";
 
-
 import {
   // When using a local executable shema (avoids an HTTP roundtrip)
   //processRequestWithGraphQL,
@@ -16,15 +15,16 @@ type ActionData = {
   };
 };
 
+const LIST_USER_QUERY =
 const INSERT_USER_MUTATION = /* GraphQL */ `
-mutation Insert_users($objects: [users_insert_input!]!) {
-  insert_users(objects: $objects) {
-    returning {
-      id
-      name
+  mutation Insert_users($objects: [users_insert_input!]!) {
+    insert_users(objects: $objects) {
+      returning {
+        id
+        name
+      }
     }
   }
-}
 `;
 
 // TODO: check how we can pick the mutation depending on the "update" or "create" scenario
@@ -42,14 +42,14 @@ mutation Insert_users($objects: [users_insert_input!]!) {
 }*/
 const UPDATE_USER_MUTATION = /* GraphQL */ `
   mutation Update_users($where: users_bool_exp!, $set: users_set_input) {
-  update_users(where: $where, _set: $set) {
-    returning {
-      id
-      name
+    update_users(where: $where, _set: $set) {
+      returning {
+        id
+        name
+      }
     }
   }
-}
-`
+`;
 
 /**
  * {
@@ -61,15 +61,14 @@ const UPDATE_USER_MUTATION = /* GraphQL */ `
 }
  */
 const DELETE_USER_MUTATION = /* GraphQL */ `
-mutation Delete_users($deleteUsersWhere: users_bool_exp!) {
-  delete_users(where: $deleteUsersWhere) {
-    returning {
-      name
+  mutation Delete_users($deleteUsersWhere: users_bool_exp!) {
+    delete_users(where: $deleteUsersWhere) {
+      returning {
+        name
+      }
     }
   }
-}
-`
-
+`;
 
 // The `processRequestWithGraphQL` function can be used for both loaders and
 // actions!
@@ -83,12 +82,10 @@ export const action: ActionFunction = (args: any) =>
     endpoint: "https://api.spacex.land/graphql/",
     // TODO: get from args?
     variables: {
-      "objects": [
-        { "name": "Eric Burel" }
-      ]
+      objects: [{ name: "Eric Burel" }],
     },
-    //schema, 
-    query: INSERT_USER_MUTATION
+    //schema,
+    query: INSERT_USER_MUTATION,
   });
 // else
 
@@ -99,7 +96,7 @@ export default function DistantApiMutationRoute() {
   // if (!data) {
   //   return "Ooops, something went wrong :(";
   // }
-  const data: any = { posts: [] }
+  const data: any = { posts: [] };
   const actionData = useActionData() as ActionData;
   const nameRef = React.useRef<HTMLInputElement>(null);
 
@@ -109,29 +106,36 @@ export default function DistantApiMutationRoute() {
     }
   }, [actionData]);
 
+  const inputClass =
+    "flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose";
   return (
-    <main>
+    <main className="container mx-auto max-w-7xl">
       <h1>Create a SpaceX user</h1>
       <Form method="post" name="create">
         {/* `remix-graphql` will automatically transform all posted 
                   form data into variables of the same name for the GraphQL
                   operation */}
         <div>
           <label htmlFor="name">Name:</label>
-          <input ref={nameRef} name="name"
+          <input
+            ref={nameRef}
+            name="name"
             aria-invalid={actionData?.errors?.name ? true : undefined}
             aria-errormessage={
               actionData?.errors?.name ? "name-error" : undefined
             }
+            className={inputClass}
           />
         </div>
         {actionData?.errors?.name && (
           <div className="pt-1 text-red-700" id="title-error">
             {actionData.errors.name}
           </div>
         )}
-        <button className="border rounded p-4" type="submit">Submit</button>
+        <button className="rounded border p-4" type="submit">
+          Submit
+        </button>
       </Form>
     </main>
   );
-}
+}