npm - @smartive/graphql-magic - Versions diffs - 15.1.1 → 15.2.1 - Mend

@smartive/graphql-magic 15.1.1 → 15.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/CHANGELOG.md +2 -2
package/docs/docs/tutorial.md +133 -89
package/docs/src/components/HomepageFeatures/index.tsx +8 -11
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,6 +1,6 @@
-## [15.1.1](https://github.com/smartive/graphql-magic/compare/v15.1.0...v15.1.1) (2024-04-03)
+## [15.2.1](https://github.com/smartive/graphql-magic/compare/v15.2.0...v15.2.1) (2024-04-03)
 ### Bug Fixes
-* Docusaurus config ([415736b](https://github.com/smartive/graphql-magic/commit/415736b866c8526b24770a8e374cf0b3667380f6))
+* Finish intro ([4ecc445](https://github.com/smartive/graphql-magic/commit/4ecc44575901cbe731dca7b70f109da6eaa847ba))

package/docs/docs/tutorial.md CHANGED Viewed

@@ -10,59 +10,85 @@ Let's create a blog with `graphql-magic`!
 ### Code base
-First create a next.js website:
+First create a `next.js` website:
 ```
 npx create-next-app@latest magic-blog --ts --app --tailwind --eslint --src
 cd magic-blog
 ```
-For some styling install `preline` and dependencies:
+Replace `src/app/globals.css`:
 ```
-npm i preline @tailwindcss/forms
-```
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
-Add `@tailwindcss/forms` to `tailwind.config.ts`:
+main {
+    @apply w-96 mx-auto
+}
-```
-  plugins: [
-    require('@tailwindcss/forms'),
-  ],
-```
+nav {
+    @apply flex items-center
+}
-Replace `app/globals.css`:
+h1, h2, h3, h4 {
+    @apply font-bold
+}
-```
-TODO
-```
+h1 {
+    @apply text-4xl mb-4 flex-grow
+}
-Replace `app/layout.tsx`:
+h2 {
+    @apply text-3xl mb-3
+}
-```
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html>
-        <body>{children}</body>
-    </html>
-  );
+h3 {
+    @apply text-2xl mb-2
+}
+h4 {
+    @apply text-xl mb-1
+}
+a {
+    @apply text-blue-500
+}
+article, form {
+    @apply mb-4 p-3 rounded-lg shadow-md border border-gray-100
+}
+input, textarea {
+    @apply border border-gray-300 w-full rounded-md p-1
+}
+label span {
+    @apply font-bold
 }
 ```
-Replace `app/page.tsx`:
+Replace `src/app/page.tsx`:
 ```
-export default function Page() {
-    return <div>
+export default async function Home() {
+    return <main>
+      <nav>
         <h1>Magic Blog</h1>
-    </div>
+      </nav>
+    </main>
 }
 ```
+Start the website:
+```
+npm run dev
+```
+### Install graphql-magic
 Add this setting to `next.config.mjs`:
 ```
@@ -79,28 +105,16 @@ Install `@smartive/graphql-magic`:
 npm install @smartive/graphql-magic
 ```
-Temporary:
-```
-npm i @graphql-codegen/typescript-compatibility
-```
 Run the gqm cli:
 ```
 npx gqm generate
 ```
-Start the website:
-```
-npm run dev
-```
 ### Database setup
-Adapt the database `.env` variables to connect to a postgresql instance, or create a new one.
-For example, to create a local instance with docker and docker-compose, create the following `docker-compose.yml`:
+Let's boot a local database instance.
+Create the following `docker-compose.yml`:
 ```
 version: '3.4'
@@ -126,7 +140,7 @@ Generate the first migration:
 npx gqm generate-migration
 ```
-Enter "setup" as migration name. Or you could first create a `feat/setup` git branch, then it would use that name automatically.
+Enter a migration name, e.g. "setup".
 Run the migration
@@ -148,10 +162,12 @@ import { getSession } from '@auth0/nextjs-auth0';
 export default async function Page() {
   const session = await getSession();
-  return <div>
+  return <main>
+    <nav>
       <h1>Welcome to my Blog</h1>
       {session ? <a href="/api/auth/logout">Logout</a> : <a href="/api/auth/login">Login</a>}
-  </div>
+    </nav>
+  </main>
 }
 ```
@@ -241,23 +257,27 @@ npx gqm generate
 Now, let's modify `src/app/page.tsx` so that it fetches the user from the database:
 ```
-import { GetMeQuery } from "../generated/client";
-import { GET_ME } from "../graphql/client/queries/get-me";
-import { executeGraphql } from "../graphql/execute";
+import { GetMeQuery } from "@/generated/client";
+import { GET_ME } from "@/graphql/client/queries/get-me";
+import { executeGraphql } from "@/graphql/execute";
-export default async function Page() {
-  const { data: { me }} = await executeGraphql<GetMeQuery>({ query: GET_ME });
+export default async function Home() {
+  const { data: { me } } = await executeGraphql<GetMeQuery>({ query: GET_ME });
-  return <div>
-      <h1>Welcome to my Blog</h1>
-      {me ? <div>Hello {me.username}! <a href="/api/auth/logout">Logout</a></div> : <a href="/api/auth/login">Login</a>}
-  </div>
+  return (
+    <main>
+      <nav>
+        <h1>Blog</h1>
+        {me ? <span>Hello, {me.username}! <a href="/api/auth/logout"> Logout</a></span> : <a href="/api/auth/login">Login</a>}
+      </nav>
+    </main>
+  );
 }
 ```
 ### Content!
-Let's create a blog by adding new models in `src/config/models.ts`:
+Let's make a blog out of this app by adding new models in `src/config/models.ts`:
 ```
   {
@@ -313,10 +333,9 @@ Generate and run the new migrations and generate the new models:
 ```
 npx gqm generate-migration
 npx env-cmd knex migrate:up
-npx gqm generate
 ```
-new get-posts
+Create a new query `src/graphql/client/queries/get-posts.ts`:
 ```
 import { gql } from '@smartive/graphql-magic';
@@ -342,12 +361,59 @@ export const GET_POSTS = gql`
 `;
 ```
+Generate the new types:
 ```
-{me &&       <CreatePost/>  }
-      <Posts/>
+npx gqm generate
 ```
+Now add all the logic to create and display posts and comments to `src/app/page.tsx`
 ```
+import { CreateCommentMutationMutation, CreateCommentMutationMutationVariables, CreatePostMutationMutation, CreatePostMutationMutationVariables, GetMeQuery, GetPostsQuery } from "@/generated/client";
+import { CREATE_COMMENT, CREATE_POST } from "@/generated/client/mutations";
+import { GET_ME } from "@/graphql/client/queries/get-me";
+import { GET_POSTS } from "@/graphql/client/queries/get-posts";
+import { executeGraphql } from "@/graphql/execute";
+import { revalidatePath } from "next/cache";
+export default async function Home() {
+  const { data: { me } } = await executeGraphql<GetMeQuery>({ query: GET_ME });
+  return (
+    <main>
+      <nav>
+        <h1>Blog</h1>
+        {me ? <span>Hello, {me.username}! <a href="/api/auth/logout"> Logout</a></span> : <a href="/api/auth/login">Login</a>}
+      </nav>
+      {me && <CreatePost />}
+      <Posts me={me} />
+    </main>
+  );
+}
+async function Posts({ me }: { me: GetMeQuery['me'] }) {
+  const { data: { posts } } = await executeGraphql<GetPostsQuery>({ query: GET_POSTS })
+  return <div>
+    {posts.map(post => <div key={post.id}>
+      <article>
+        <h2>{post.title}</h2>
+        <div>by {post.createdBy.username}</div>
+        <p>{post.content}</p>
+        <h4>Comments</h4>
+        {post.comments.map(comment => (<div key={comment.id}>
+          <div>{comment.createdBy.username}</div>
+          <p>{comment.content}</p> by {comment.createdBy.username}
+        </div>)
+        )}
+        {me && <CreateComment postId={post.id} />}
+      </article>
+    </div>)}
+  </div>
+}
 async function CreatePost() {
   async function createPost(formData: FormData) {
     'use server'
@@ -365,44 +431,20 @@ async function CreatePost() {
   return <form action={createPost}>
     <h2>New Post</h2>
-    <div>
+    <label>
       <span>Title</span>
       <input name="title" />
-    </div>
-    <div>
+    </label>
+    <label>
       <span>Content</span>
       <textarea rows={5} name="content" />
-    </div>
+    </label>
     <div>
       <button type="submit">Create</button>
     </div>
   </form>
 }
-```
-```
-async function Posts() {
-  const { data: { posts } } = await executeGraphql<GetPostsQuery>({ query: GET_POSTS })
-  return <div>
-    {posts.map(post => <div key={post.id}>
-      <article>
-        <h3>{post.title}</h3>
-        <div>{post.createdBy.username}</div>
-        <div>{post.content}</div>
-        {post.comments.map(comment => (<div key={comment.id}>
-          <div>{comment.createdBy.username}</div>
-          <p>{comment.content}</p> by {comment.createdBy.username}
-        </div>)
-        )}
-        <CreateComment postId={post.id} />
-      </article>
-    </div>)}
-  </div>
-}
-```
-```
 function CreateComment({ postId }: { postId: string }) {
   async function createComment(formData: FormData) {
     'use server'
@@ -429,3 +471,5 @@ function CreateComment({ postId }: { postId: string }) {
   </form>
 }
 ```
+Now you should have a working minimal blog example!

package/docs/src/components/HomepageFeatures/index.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import Heading from '@theme/Heading';
+import clsx from 'clsx';
 import styles from './styles.module.css';
 type FeatureItem = {
@@ -10,38 +10,35 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
+    title: 'Model-first',
     Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Define your model, generate everything else.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
+    title: 'CLI',
     Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        Generate things with our cli.
       </>
     ),
   },
   {
-    title: 'Powered by React',
+    title: 'Brought to you by smartive',
     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        We developed this as an internal tool.
       </>
     ),
   },
 ];
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, Svg, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@smartive/graphql-magic",
-  "version": "15.1.1",
+  "version": "15.2.1",
   "description": "",
   "source": "src/index.ts",
   "type": "module",