feat(postgraphile)!: upgrade to v5

Author: dargmuesli

Dockerfile

@@ -2,7 +2,7 @@
 # check=skip=SecretsUsedInArgOrEnv
 
 # <DEPENDENCIES>
-FROM ghcr.io/maevsi/sqitch:10.0
+FROM ghcr.io/maevsi/postgraphile:2.0.0-beta.1
 # </DEPENDENCIES>
 
 #############

src/app/components/account/AccountProfilePicture.vue

@@ -37,8 +37,8 @@ const TUSD_FILES_URL = useTusdFilesUrl()
 // api data
 const query = useQuery({
   query: graphql(`
-    query AccountById($id: UUID!) {
-      accountById(id: $id) {
+    query AccountByRowId($id: UUID!) {
+      accountByRowId(rowId: $id) {
         id
         profilePictureByAccountId {
           id
@@ -56,7 +56,7 @@ const query = useQuery({
   },
 })
 const api = await useApiData([query])
-const account = computed(() => api.value.data.accountById)
+const account = computed(() => api.value.data.accountByRowId)
 const upload = computed(
   () => account.value?.profilePictureByAccountId?.uploadByUploadId,
 )

src/app/components/app/attendance/guest/AppAttendanceGuestDynamic.vue

@@ -20,7 +20,7 @@ const { guestId } = defineProps<{
 const query = await useQuery({
   query: graphql(`
     query AttendanceGuest($id: UUID!) {
-      guestById(id: $id) {
+      guestByRowId(rowId: $id) {
         contactByContactId {
           accountByAccountId {
             id
@@ -47,7 +47,7 @@ const query = await useQuery({
   },
 })
 
-const guest = computed(() => query.data.value?.guestById)
+const guest = computed(() => query.data.value?.guestByRowId)
 
 const { t } = useI18n()
 </script>

src/app/components/contact/ContactList.vue

@@ -31,12 +31,12 @@
           <LayoutTbody>
             <ContactListItem
               v-for="contact in contacts"
-              :id="contact.nodeId"
-              :key="contact.nodeId"
+              :id="contact.rowId"
+              :key="contact.rowId"
               :contact
-              :is-deleting="pending.deletions.includes(contact.nodeId)"
-              :is-editing="pending.edits.includes(contact.nodeId)"
-              @delete="delete_(contact.nodeId, contact.id)"
+              :is-deleting="pending.deletions.includes(contact.rowId)"
+              :is-editing="pending.edits.includes(contact.rowId)"
+              @delete="delete_(contact.rowId)"
               @edit="edit(contact)"
             />
           </LayoutTbody>
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { useDeleteContactByIdMutation } from '~~/gql/documents/mutations/contact/contactDeleteById'
+import { useDeleteContactByRowIdMutation } from '~~/gql/documents/mutations/contact/contactDeleteByRowId'
 import { useAllContactsQuery } from '~~/gql/documents/queries/contact/contactsAll'
 import type { ContactItemFragment } from '~~/gql/generated/graphql'
 import { getContactItem } from '~~/gql/documents/fragments/contactItem'
@@ -88,8 +88,8 @@ const selectedContact = ref<
     | 'firstName'
     | 'id'
     | 'lastName'
-    | 'nodeId'
     | 'phoneNumber'
+    | 'rowId'
     | 'url'
   >
 >()
@@ -102,8 +102,8 @@ const contactsQuery = useAllContactsQuery(
     first: ITEMS_PER_PAGE_LARGE,
   })),
 )
-const deleteContactByIdMutation = useDeleteContactByIdMutation()
-const api = await useApiData([contactsQuery, deleteContactByIdMutation])
+const deleteContactByRowIdMutation = useDeleteContactByRowIdMutation()
+const api = await useApiData([contactsQuery, deleteContactByRowIdMutation])
 const contacts = computed(
   () =>
     api.value.data.allContacts?.nodes
@@ -118,10 +118,10 @@ const add = () => {
   selectedContact.value = undefined
   store.modals.push({ id: 'ModalContact' })
 }
-const delete_ = async (nodeId: string, id: string) => {
-  pending.deletions.push(nodeId)
-  await deleteContactByIdMutation.executeMutation({ id })
-  pending.deletions.splice(pending.deletions.indexOf(nodeId), 1)
+const delete_ = async (rowId: string) => {
+  pending.deletions.push(rowId)
+  await deleteContactByRowIdMutation.executeMutation({ id: rowId })
+  pending.deletions.splice(pending.deletions.indexOf(rowId), 1)
   // TODO: update cache, especially pagination, or reset query (https://github.com/maevsi/vibetype/issues/720)
 }
 const edit = (
@@ -133,12 +133,12 @@ const edit = (
     | 'firstName'
     | 'id'
     | 'lastName'
-    | 'nodeId'
     | 'phoneNumber'
+    | 'rowId'
     | 'url'
   >,
 ) => {
-  pending.edits.push(contact.nodeId)
+  pending.edits.push(contact.rowId)
   formContactHeading.value = t('contactEdit')
   selectedContact.value = contact
   store.modals.push({ id: 'ModalContact' })
@@ -151,7 +151,7 @@ const onContactSubmitSuccess = () => {
 const onModalContactClose = () => {
   if (!selectedContact.value) return
 
-  pending.edits.splice(pending.edits.indexOf(selectedContact.value.nodeId), 1)
+  pending.edits.splice(pending.edits.indexOf(selectedContact.value.rowId), 1)
 }
 </script>
 

src/app/components/contact/ContactListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <tr
     v-if="contact"
-    :key="contact.nodeId"
+    :key="contact.rowId"
     :class="{
       'animate-pulse': isDeleting,
     }"
@@ -56,7 +56,6 @@ import type { ContactItemFragment } from '~~/gql/generated/graphql'
 const { contact, isDeleting, isEditing } = defineProps<{
   contact: Pick<
     ContactItemFragment,
-    | 'nodeId'
     | 'accountId'
     | 'accountByAccountId'
     | 'accountByCreatedBy'
@@ -67,6 +66,7 @@ const { contact, isDeleting, isEditing } = defineProps<{
     | 'firstName'
     | 'lastName'
     | 'phoneNumber'
+    | 'rowId'
     | 'url'
   >
   isDeleting?: boolean

src/app/components/event/card/EventCard.vue

@@ -226,16 +226,16 @@ const createEventFavoriteMutation = useMutation(
           createdBy
           eventId
           id
-          nodeId
+          rowId
         }
       }
     }
   `),
 )
-const deleteEventFavoriteByIdMutation = useMutation(
+const deleteEventFavoriteByRowIdMutation = useMutation(
   graphql(`
-    mutation DeleteEventFavoriteById($input: DeleteEventFavoriteByIdInput!) {
-      deleteEventFavoriteById(input: $input) {
+    mutation DeleteEventFavoriteByRowId($input: DeleteEventFavoriteInput!) {
+      deleteEventFavorite(input: $input) {
         clientMutationId
       }
     }
@@ -244,7 +244,7 @@ const deleteEventFavoriteByIdMutation = useMutation(
 // TODO: show loading state, error details
 // const api = await useApiData([
 //   createEventFavoriteMutation,
-//   deleteEventFavoriteByIdMutation,
+//   deleteEventFavoriteByRowIdMutation,
 // ])
 const isFavorite = computed(
   () =>
@@ -261,7 +261,7 @@ const toggleEventFavorite = async () => {
 
     await executeUrqlRequest({
       errorMessageI18n: t('favoriteDeleteError'),
-      request: deleteEventFavoriteByIdMutation.executeMutation({
+      request: deleteEventFavoriteByRowIdMutation.executeMutation({
         input: {
           id: event.eventFavoritesByEventId.nodes[0].id,
         },

src/app/components/form/FormContact.vue

@@ -163,7 +163,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import { useCreateContactMutation } from '~~/gql/documents/mutations/contact/contactCreate'
-import { useUpdateContactByIdMutation } from '~~/gql/documents/mutations/contact/contactUpdateById'
+import { useUpdateContactByRowIdMutation } from '~~/gql/documents/mutations/contact/contactUpdateByRowId'
 import type { ContactItemFragment } from '~~/gql/generated/graphql'
 
 const { contact = undefined } = defineProps<{
@@ -208,8 +208,11 @@ const isFormSent = ref(false)
 
 // api data
 const createContactMutation = useCreateContactMutation()
-const updateContactByIdMutation = useUpdateContactByIdMutation()
-const api = await useApiData([createContactMutation, updateContactByIdMutation])
+const updateContactByRowIdMutation = useUpdateContactByRowIdMutation()
+const api = await useApiData([
+  createContactMutation,
+  updateContactByRowIdMutation,
+])
 
 // methods
 const submit = async () => {
@@ -224,7 +227,7 @@ const submit = async () => {
 
   if (form.id) {
     // Edit
-    const result = await updateContactByIdMutation.executeMutation({
+    const result = await updateContactByRowIdMutation.executeMutation({
       id: form.id,
       contactPatch: {
         accountId: account?.id || null,

src/app/components/form/FormEvent.vue

@@ -115,7 +115,7 @@
         </template>
       </FormInput>
       <FormInput
-        v-if="v$.visibility.$model === 'PUBLIC'"
+        v-if="v$.visibility.$model === EventVisibility.Public"
         id-label="input-invitee-count-maximum"
         :title="t('maximumInviteeCount')"
         type="number"
@@ -275,7 +275,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { DatePicker } from 'v-calendar'
 
 import { useCreateEventMutation } from '~~/gql/documents/mutations/event/eventCreate'
-import { useUpdateEventByIdMutation } from '~~/gql/documents/mutations/event/eventUpdateById'
+import { useUpdateEventByRowIdMutation } from '~~/gql/documents/mutations/event/eventUpdateByRowId'
 import { EventVisibility } from '~~/gql/generated/graphql'
 import type { EventItemFragment } from '~~/gql/generated/graphql'
 
@@ -326,7 +326,7 @@ const isFormSent = ref(false)
 
 // api data
 const createEventMutation = useCreateEventMutation()
-const updateEventMutation = useUpdateEventByIdMutation()
+const updateEventMutation = useUpdateEventByRowIdMutation()
 const api = await useApiData([createEventMutation, updateEventMutation])
 
 // methods

src/app/components/form/FormGuest.vue

@@ -89,7 +89,7 @@ import { useCreateGuestsMutation } from '~~/gql/documents/mutations/guest/guestC
 import { useAllContactsQuery } from '~~/gql/documents/queries/contact/contactsAll'
 import type { EventItemFragment } from '~~/gql/generated/graphql'
 import { getContactItem } from '~~/gql/documents/fragments/contactItem'
-// import { accountByIdQuery } from '~~/gql/documents/queries/account/accountById'
+// import { accountByRowIdQuery } from '~~/gql/documents/queries/account/accountByRowId'
 // import { getAccountItem } from '~~/gql/documents/fragments/accountItem'
 
 const { event, guestContactIdsExisting = undefined } = defineProps<{
@@ -188,7 +188,7 @@ const contactsFiltered = computed(() => {
     // // TODO: make more performant
     // const contactAccountQuery = contact.accountId
     //   ? await $urql.value
-    //       .query(accountByIdQuery, {
+    //       .query(accountByRowIdQuery, {
     //         id: contact.accountId,
     //       })
     //       .toPromise()
@@ -201,7 +201,7 @@ const contactsFiltered = computed(() => {
     // }
 
     // const contactAccount = getAccountItem(
-    //   contactAccountQuery?.data?.accountById,
+    //   contactAccountQuery?.data?.accountByRowId,
     // )
 
     // if (!contactAccount) {

src/app/components/guest/GuestFeedbackIcon.vue

@@ -1,11 +1,11 @@
 <template>
   <AppIconCheckCircleSolid
-    v-if="feedback === 'ACCEPTED'"
+    v-if="feedback === InvitationFeedback.Accepted"
     class="text-green-600"
     :title="t('feedbackAccepted')"
   />
   <AppIconXCircleSolid
-    v-else-if="feedback === 'CANCELED'"
+    v-else-if="feedback === InvitationFeedback.Canceled"
     class="text-(--semantic-critic-text)"
     :title="t('feedbackCanceled')"
   />
@@ -19,8 +19,10 @@
 </template>
 
 <script setup lang="ts">
+import { InvitationFeedback } from '~~/gql/generated/graphql'
+
 const { feedback } = defineProps<{
-  feedback: string
+  feedback: string | null
 }>()
 
 const { t } = useI18n()