npm - @smartive/graphql-magic - Versions diffs - 15.1.0 → 15.2.0 - Mend

@smartive/graphql-magic 15.1.0 → 15.2.0

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 (5) hide show

package/CHANGELOG.md +2 -2
package/docs/docs/tutorial.md +126 -87
package/docs/docusaurus.config.ts +2 -5
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.0](https://github.com/smartive/graphql-magic/compare/v15.0.1...v15.1.0) (2024-04-03)
+# [15.2.0](https://github.com/smartive/graphql-magic/compare/v15.1.1...v15.2.0) (2024-04-03)
 ### Features
-* Docs ([#153](https://github.com/smartive/graphql-magic/issues/153)) ([a827813](https://github.com/smartive/graphql-magic/commit/a8278137bf7d8b68a06d17ebeb9380071490b4c9))
+* Finish tutorial ([c1b0a21](https://github.com/smartive/graphql-magic/commit/c1b0a215ed23773fd287cd5b5898f07f7c401af1))

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 `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`:
 ```
-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'
@@ -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,17 +257,21 @@ 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>
+  );
 }
 ```
@@ -316,7 +336,7 @@ 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 +362,53 @@ export const GET_POSTS = gql`
 `;
 ```
-```
-{me &&       <CreatePost/>  }
-      <Posts/>
-```
+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 +426,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 +466,5 @@ function CreateComment({ postId }: { postId: string }) {
   </form>
 }
 ```
+Now you should have a working minimal blog example!

package/docs/docusaurus.config.ts CHANGED Viewed

@@ -7,11 +7,8 @@ const config: Config = {
   tagline: 'Model-first GraphQL API generator',
   favicon: 'img/favicon.ico',
-  // Set the production url of your site here
-  url: 'https://your-docusaurus-site.example.com',
-  // Set the /<baseUrl>/ pathname under which your site is served
-  // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  url: 'https://smartive.github.io',
+  baseUrl: '/graphql-magic/',
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

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.0",
+  "version": "15.2.0",
   "description": "",
   "source": "src/index.ts",
   "type": "module",