chore: migrate to appwrite cloud (#408)

* chore(appwrite): migrate to cloud * test(e2e): enable appwrite tests * fix(refine-nextjs): fix category id form field text * chore(mui-example): update header name for content * chore(appwrite): update created at value key * ci: skip appwrite tests
pankod · Jul 26, 2024 · 3101f40 · 3101f40
1 parent 1d9768b
commit 3101f40
Show file tree

Hide file tree

Showing 42 changed files with 382 additions and 79 deletions.
diff --git a/refine-nextjs/plugins/_base/extend.js b/refine-nextjs/plugins/_base/extend.js
@@ -182,6 +182,8 @@ module.exports = {
             base.blogPostCategoryIdFormField = `"categoryId"`;
         } else if (dataProvider === "data-provider-supabase") {
             base.blogPostCategoryIdFormField = `"categoryId"`;
+        } else if (dataProvider === "data-provider-appwrite") {
+            base.blogPostCategoryIdFormField = `"category"`;
         } else {
             if (uiFramework === "mui" || isHeadless) {
                 base.blogPostCategoryIdFormField = `"category.id"`;
@@ -191,7 +193,7 @@ module.exports = {
         }
 
         // ## blogPostCategoryTableField
-        if (base.isGraphQL) {
+        if (base.isGraphQL || dataProvider === "data-provider-appwrite") {
             if (isHeadless) {
                 base.blogPostCategoryTableField = `"category.title"`;
             }

diff --git a/refine-nextjs/plugins/antd-example/src/app/blog-posts/edit/[id]/page.tsx b/refine-nextjs/plugins/antd-example/src/app/blog-posts/edit/[id]/page.tsx
@@ -31,14 +31,30 @@ export default function BlogPostEdit() {
         meta: {
             select: '*, categories(id,title)',
         },
+<%_ } _%>
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+        queryOptions: {
+            select: ({ data }) => {
+            return {
+                data: {
+                ...data,
+                category: data.category.$id,
+                },
+            };
+            },
+        },
 <%_ } _%>
     });
 
     const blogPostsData = queryResult?.data?.data;
 
     const { selectProps: categorySelectProps } = useSelect({
         resource: "categories",
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+        defaultValue: blogPostsData?.<%- blogPostCategoryFieldName %>,
+<%_ } else { _%>
         defaultValue: blogPostsData?.<%- blogPostCategoryFieldName %>?.id,
+<%_ } _%>
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>
         meta: {
             fields: BLOG_POSTS_CATEGORIES_SELECT_QUERY,

diff --git a/refine-nextjs/plugins/antd-example/src/app/blog-posts/page.tsx b/refine-nextjs/plugins/antd-example/src/app/blog-posts/page.tsx
@@ -45,7 +45,7 @@ export default function BlogPostList() {
 <%_ } _%>
     });
 
-<%_ if (!isGraphQL) { _%>
+<%_ if (!isGraphQL && answers["data-provider"] !== "data-provider-appwrite") { _%>
     const { data: categoryData, isLoading: categoryIsLoading } = useMany({
         resource: "categories",
         ids: tableProps?.dataSource?.map((item) => item?.<%- blogPostCategoryFieldName %>?.id).filter(Boolean) ?? [],
@@ -71,7 +71,7 @@ export default function BlogPostList() {
                 <Table.Column
                     dataIndex={<%- blogPostCategoryTableField %>}
                     title={"Category"}
-                    <%_ if (!isGraphQL) { _%>
+                    <%_ if (!isGraphQL && answers["data-provider"] !== "data-provider-appwrite") { _%>
                     render={(value) =>
                             categoryIsLoading ? (
                                 <>Loading...</>
@@ -86,7 +86,9 @@ export default function BlogPostList() {
                 <Table.Column dataIndex="status" title={"Status"} />
                 <Table.Column
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>  
-                    dataIndex={["created_at"]}      
+                    dataIndex={["created_at"]}    
+<%_ } else if (answers["data-provider"] === "data-provider-appwrite") { _%>  
+                    dataIndex={["$createdAt"]}  
 <%_ } else { _%>
                     dataIndex={["createdAt"]}
 <%_ } _%>        

diff --git a/refine-nextjs/plugins/antd-example/src/app/blog-posts/show/[id]/page.tsx b/refine-nextjs/plugins/antd-example/src/app/blog-posts/show/[id]/page.tsx
@@ -46,7 +46,7 @@ export default function BlogPostShow() {
 
     const record = data?.data;
 
-<%_ if (!isGraphQL) { _%>
+<%_ if (!isGraphQL && answers["data-provider"] !== "data-provider-appwrite") { _%>
     const { data: categoryData, isLoading: categoryIsLoading } = useOne({
         resource: "categories",
         id: record?.<%- blogPostCategoryFieldName %>?.id || "",
@@ -65,7 +65,7 @@ export default function BlogPostShow() {
             <Title level={5}>{"Content"}</Title>
             <MarkdownField value={record?.content} />
             <Title level={5}>{"Category"}</Title>
-<%_ if (isGraphQL) { _%>  
+<%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>  
             <TextField value={record?.<%- blogPostCategoryFieldName %>?.title} />
 <%_ } else { _%>
             <TextField value={categoryIsLoading ? (
@@ -77,7 +77,13 @@ export default function BlogPostShow() {
             <Title level={5}>{"Status"}</Title>
             <TextField value={record?.status} />
             <Title level={5}>{"CreatedAt"}</Title>
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>  
+            <DateField value={record?.$createdAt} />
+<%_ } else if (answers["data-provider"] === "data-provider-hasura") { _%>  
+            <DateField value={record?.created_at} />
+<%_ } else { _%>
             <DateField value={record?.createdAt} />
+<%_ } _%>  
         </Show>
     );
 };
diff --git a/refine-nextjs/plugins/data-provider-appwrite/src/providers/data-provider/index.ts b/refine-nextjs/plugins/data-provider-appwrite/src/providers/data-provider/index.ts
@@ -4,9 +4,9 @@ import { dataProvider, liveProvider } from "@refinedev/appwrite";
 import { appwriteClient } from "@utils/appwrite/client";
 
 export const appwriteDataProvider = dataProvider(appwriteClient, {
-    databaseId: "database",
+  databaseId: "default",
 });
 
 export const appwriteLiveProvider = liveProvider(appwriteClient, {
-    databaseId: "database",
+  databaseId: "default",
 });
diff --git a/refine-nextjs/plugins/data-provider-appwrite/src/utils/constants.ts b/refine-nextjs/plugins/data-provider-appwrite/src/utils/constants.ts
@@ -1,3 +1,3 @@
-export const APPWRITE_URL = "https://refine.appwrite.org/v1";
-export const APPWRITE_PROJECT = "61c4368b4e349";
+export const APPWRITE_URL = "https://cloud.appwrite.io/v1";
+export const APPWRITE_PROJECT = "6697687d002cbd31ba6b";
 export const APPWRITE_JWT_KEY = "appwrite-jwt";
diff --git a/refine-nextjs/plugins/headless-example/src/app/blog-posts/create/page.tsx b/refine-nextjs/plugins/headless-example/src/app/blog-posts/create/page.tsx
@@ -111,7 +111,11 @@ export default function BlogPostCreate() {
                             ))}
                         </select>
                         <span style={{ color: "red" }}>
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+                            {(errors as any)?.<%- blogPostCategoryFieldName %>?.message as string}
+<%_ } else { _%>
                             {(errors as any)?.<%- blogPostCategoryFieldName %>?.id?.message as string}
+<%_ } _%>
                         </span>
                     </label>
                     <label>

diff --git a/refine-nextjs/plugins/headless-example/src/app/blog-posts/edit/[id]/page.tsx b/refine-nextjs/plugins/headless-example/src/app/blog-posts/edit/[id]/page.tsx
@@ -48,14 +48,32 @@ export default function BlogPostCreate() {
                 select: '*, categories(id,title)',
             },
         },
+<%_ } _%>
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+        refineCoreProps: {
+            queryOptions: {
+                select: ({ data }) => {
+                return {
+                    data: {
+                    ...data,
+                    category: data.category.$id,
+                    },
+                };
+                },
+            },
+        },
 <%_ } _%>
     });
 
     const blogPostsData = queryResult?.data?.data;
 
     const { options: categoryOptions } = useSelect({
         resource: "categories",
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+        defaultValue: blogPostsData?.<%- blogPostCategoryFieldName %>,
+<%_ } else { _%>
         defaultValue: blogPostsData?.<%- blogPostCategoryFieldName %>?.id,
+<%_ } _%>
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>
             meta: {
                 fields: BLOG_POSTS_CATEGORIES_SELECT_QUERY,
@@ -69,7 +87,11 @@ export default function BlogPostCreate() {
     });
 
     React.useEffect(() => {
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+        setValue(<%- blogPostCategoryIdFormField %>, blogPostsData?.<%- blogPostCategoryFieldName %>);
+<%_ } else { _%>
         setValue(<%- blogPostCategoryIdFormField %>, blogPostsData?.<%- blogPostCategoryFieldName %>?.id);
+<%_ } _%>
     }, [categoryOptions]);
 
     return (
@@ -134,7 +156,11 @@ export default function BlogPostCreate() {
                             ))}
                         </select>
                         <span style={{ color: "red" }}>
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+                            {(errors as any)?.<%- blogPostCategoryFieldName %>?.message as string}
+<%_ } else { _%>
                             {(errors as any)?.<%- blogPostCategoryFieldName %>?.id?.message as string}
+<%_ } _%>
                         </span>
                     </label>
                     <label>

diff --git a/refine-nextjs/plugins/headless-example/src/app/blog-posts/page.tsx b/refine-nextjs/plugins/headless-example/src/app/blog-posts/page.tsx
@@ -37,7 +37,7 @@ export default function BlogPostList() {
                 id: "category",
                 header: "Category",
                 accessorKey: <%- blogPostCategoryTableField %>,
-                <%_ if (!isGraphQL) { _%>
+                <%_ if (!isGraphQL && answers["data-provider"] !== "data-provider-appwrite") { _%>
                     cell: function render({ getValue, table }) {
                         const meta = table.options.meta as {
                             categoryData: GetManyResponse;
@@ -63,9 +63,11 @@ export default function BlogPostList() {
             {
                 id: "createdAt",
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>  
-                    accessorKey: "created_at",
+                accessorKey: "created_at",
+<%_ } else if (answers["data-provider"] === "data-provider-appwrite") { _%>  
+                accessorKey: "$createdAt",
 <%_ } else { _%>
-                    accessorKey: "createdAt",
+                accessorKey: "createdAt",
 <%_ } _%>      
                 header: "Created At",
                 cell: function render({ getValue }) {
@@ -159,7 +161,7 @@ export default function BlogPostList() {
 <%_ } _%>
     });
 
-<%_ if (!isGraphQL) { _%>
+<%_ if (!isGraphQL && answers["data-provider"] !== "data-provider-appwrite") { _%>
     const { data: categoryData } = useMany({
         resource: "categories",
         ids: tableData?.data?.map((item) => item?.<%- blogPostCategoryFieldName %>?.id).filter(Boolean) ?? [],

diff --git a/refine-nextjs/plugins/headless-example/src/app/blog-posts/show/[id]/page.tsx b/refine-nextjs/plugins/headless-example/src/app/blog-posts/show/[id]/page.tsx
@@ -43,7 +43,7 @@ export default function BlogPostShow() {
 
     const record = data?.data;
 
-<%_ if (!isGraphQL) { _%>
+<%_ if (!isGraphQL && answers["data-provider"] !== "data-provider-appwrite") { _%>
     const { data: categoryData, isLoading: categoryIsLoading } = useOne({
         resource: "categories",
         id: record?.<%- blogPostCategoryFieldName %>?.id || "",
@@ -85,7 +85,7 @@ export default function BlogPostShow() {
                 </div>
                 <div style={{ marginTop: "6px" }}>
                     <h5>{"Category"}</h5>
-<%_ if (isGraphQL) { _%>  
+<%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>  
                     <div>{record?.<%- blogPostCategoryFieldName %>?.title}</div>
 <%_ } else { _%>
                     <div>
@@ -108,6 +108,10 @@ export default function BlogPostShow() {
                     {new Date(record?.created_at).toLocaleString(undefined, {
                             timeZone: "UTC",
                     })}
+<%_ } else if (answers["data-provider"] === "data-provider-appwrite") { _%>  
+                    {new Date(record?.$createdAt).toLocaleString(undefined, {
+                        timeZone: "UTC",
+                    })}
 <%_ } else { _%>
                     {new Date(record?.createdAt).toLocaleString(undefined, {
                         timeZone: "UTC",

diff --git a/refine-nextjs/plugins/mui-example/src/app/blog-posts/create/page.tsx b/refine-nextjs/plugins/mui-example/src/app/blog-posts/create/page.tsx
@@ -118,10 +118,17 @@ export default function BlogPostCreate() {
                                     label={"Category"}
                                     margin="normal"
                                     variant="outlined"
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+                                    error={!!(errors as any)?.<%- blogPostCategoryFieldName %>}
+                                    helperText={
+                                        (errors as any)?.<%- blogPostCategoryFieldName %>?.message
+                                    }
+<%_ } else { _%>
                                     error={!!(errors as any)?.<%- blogPostCategoryFieldName %>?.id}
                                     helperText={
                                         (errors as any)?.<%- blogPostCategoryFieldName %>?.id?.message
                                     }
+<%_ } _%>
                                     required
                                 />
                             )}

diff --git a/refine-nextjs/plugins/mui-example/src/app/blog-posts/edit/[id]/page.tsx b/refine-nextjs/plugins/mui-example/src/app/blog-posts/edit/[id]/page.tsx
@@ -49,14 +49,32 @@ export default function BlogPostEdit() {
                 select: '*, categories(id,title)',
             },
         },
+<%_ } _%>
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+    refineCoreProps: {
+        queryOptions: {
+            select: ({ data }) => {
+            return {
+                data: {
+                ...data,
+                category: data.category.$id,
+                },
+            };
+            },
+        },
+    },
 <%_ } _%>
     });
 
     const blogPostsData = queryResult?.data?.data;
 
     const { autocompleteProps: categoryAutocompleteProps } = useAutocomplete({
         resource: "categories",
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+        defaultValue: blogPostsData?.<%- blogPostCategoryFieldName %>,
+<%_ } else { _%>
         defaultValue: blogPostsData?.<%- blogPostCategoryFieldName %>?.id,
+<%_ } _%>
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>
         meta: {
             fields: BLOG_POSTS_CATEGORIES_SELECT_QUERY,
@@ -122,10 +140,17 @@ export default function BlogPostEdit() {
                                     label={"Category"}
                                     margin="normal"
                                     variant="outlined"
+<%_ if (answers["data-provider"] === "data-provider-appwrite") { _%>
+                                    error={!!(errors as any)?.<%- blogPostCategoryFieldName %>}
+                                    helperText={
+                                        (errors as any)?.<%- blogPostCategoryFieldName %>?.message
+                                    }
+<%_ } else { _%>
                                     error={!!(errors as any)?.<%- blogPostCategoryFieldName %>?.id}
                                     helperText={
                                         (errors as any)?.<%- blogPostCategoryFieldName %>?.id?.message
                                     }
+<%_ } _%>
                                     required
                                 />
                             )}

diff --git a/refine-nextjs/plugins/mui-example/src/app/blog-posts/page.tsx b/refine-nextjs/plugins/mui-example/src/app/blog-posts/page.tsx
@@ -44,7 +44,7 @@ export default function BlogPostList() {
 <%_ } _%>
     });
 
-<%_ if (!isGraphQL) { _%>
+<%_ if (!isGraphQL && answers["data-provider"] !== "data-provider-appwrite") { _%>
     const { data: categoryData, isLoading: categoryIsLoading } = useMany({
         resource: "categories",
         ids: dataGridProps?.rows?.map((item: any) => item?.<%- blogPostCategoryFieldName %>?.id).filter(Boolean) ?? [],
@@ -71,7 +71,7 @@ export default function BlogPostList() {
             {
                 field: "content",
                 flex: 1,
-                headerName: "content",
+                headerName: "Content",
                 minWidth: 250,
                 renderCell: function render({ value }) {
                     if (!value) return '-'
@@ -85,7 +85,7 @@ export default function BlogPostList() {
                 flex: 1,
                 headerName: "Category",
                 minWidth: 300,
-                <%_ if (isGraphQL) { _%>
+                <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>
                 valueGetter: ({ row }) => {
                       const value = row?.<%- blogPostCategoryFieldName %>?.title
                        return value
@@ -112,7 +112,9 @@ export default function BlogPostList() {
             },
             {
 <%_ if (answers["data-provider"] === "data-provider-hasura") { _%>  
-                    field: "created_at",       
+                    field: "created_at",   
+<%_ } else if (answers["data-provider"] === "data-provider-appwrite") { _%>  
+                    field: "$createdAt",   
 <%_ } else { _%>
                     field: "createdAt",
 <%_ } _%>        
@@ -141,7 +143,7 @@ export default function BlogPostList() {
                 minWidth: 80,
             },
         ],
-        <%_ if (isGraphQL) { _%>
+        <%_ if (isGraphQL || answers["data-provider"] === "data-provider-appwrite") { _%>
             [],
         <%_ } else { _%>
             [categoryData],