Issue with Updating User Profile Information Not Reflecting in Database

[PaddyWhaacks]

I hope this message finds you well. I am reaching out to you regarding an issue I have encountered while attempting to update user profile information within our application. I would like to share the details of the problem along with the error messages I have encountered.

Problem Description:

When I try to modify user information such as name, first name, email address, and phone number in the application, the changes are not being saved to the database. I have followed the appropriate steps to perform the update, but the modifications are not being reflected on the server side.

Steps Taken:

I log into the application as a user.
I navigate to the "Profile" section where I can edit my personal information.
I modify the name, first name, email address, and/or phone number.
I click the "Save" button to apply the changes.

Encountered Error Messages:

I have also come across the following error messages in the console during my update attempts:

Uncaught (in promise) Error: Variable "$input" got invalid value... Field "id" is not defined by type "UpdateCustomerInput".
Loading translations...
Error [ERR_STREAM_DESTROYED]: Cannot call write after a stream was destroyed

[gioboa]

Thanks for the report. Would you like to investigate more on that? The message is eloquent the id field is missing, we should pass it

[gioboa]

Did you solve this issue @PaddyWhaacks ?

[ashishkpaul]

I checked, getting same issue

[prasmalla]

hi @ashishkpaul is this still an issue?

[ashishkpaul]

Yes, ot was resolved by upgrading the vendure with newer version

[gioboa]

I think we can close it b/c as @ashishkpaul mentioned, it's solved.

[ashishkpaul]

No sir, The issue is still persist

[ashishkpaul]

I tried to resolve it, src/routes/account/address-book/index.tsx

import { component$, useContext, useSignal, useVisibleTask$ } from '@builder.io/qwik';
import { useNavigate } from '@builder.io/qwik-city';
import AddressCard from '~/components/account/AddressCard';
import { HighlightedButton } from '~/components/buttons/HighlightedButton';
import PlusIcon from '~/components/icons/PlusIcon';
import { APP_STATE } from '~/constants';
import { Address } from '~/generated/graphql';
import {
    deleteCustomerAddressMutation,
    getActiveCustomerAddressesQuery,
} from '~/providers/shop/customer/customer';
import { ShippingAddress } from '~/types';

export default component$(() => {
    const navigate = useNavigate();
    const appState = useContext(APP_STATE);
    const activeCustomerAddresses = useSignal<{ id: string; addresses: ShippingAddress[] }>();

    useVisibleTask$(async () => {
        const activeCustomer = await getActiveCustomerAddressesQuery();
        const { id, addresses } = activeCustomer;
        const shippingAddresses: ShippingAddress[] = (addresses as Address[]).map(
            (address: Address) =>
                ({
                    id: address.id,
                    fullName: address.fullName,
                    streetLine1: address.streetLine1,
                    streetLine2: address.streetLine2,
                    company: address.company,
                    city: address.city,
                    province: address.province,
                    postalCode: address.postalCode,
                    countryCode: address.country.code, // Updated to countryCode
                    phoneNumber: address.phoneNumber,
                    defaultShippingAddress: address.defaultShippingAddress,
                    defaultBillingAddress: address.defaultBillingAddress,
                }) as ShippingAddress
        );
        activeCustomerAddresses.value = { id, addresses: shippingAddresses };

        if (activeCustomer?.addresses) {
            appState.addressBook.splice(0, appState.addressBook.length);
            appState.addressBook.push(...shippingAddresses);
        }
    });

    return activeCustomerAddresses.value ? (
        <div class="max-w-6xl m-auto rounded-lg p-4 space-y-4">
            <div class="flex flex-wrap gap-6 justify-evenly">
                {[...appState.addressBook].map((address) => (
                    <div class="min-w-[20rem]" key={address.id}>
                        <AddressCard
                            address={address}
                            onDelete$={async (id) => {
                                try {
                                    await deleteCustomerAddressMutation(id);
                                    // Optimistically update state without full page reload
                                    appState.addressBook = appState.addressBook.filter((a) => a.id !== id);
                                } catch (error) {
                                    console.error('Failed to delete address:', error);
                                }
                            }}
                        />
                    </div>
                ))}
            </div>
            <div class="flex justify-center">
                <HighlightedButton
                    onClick$={() => {
                        navigate('/account/address-book/add');
                    }}
                >
                    <PlusIcon /> &nbsp; New Address
                </HighlightedButton>
            </div>
        </div>
    ) : (
        <div class="h-[100vh]" />
    );
});

Now, it is updating and saving the address book, Is it right to do like this ?

[ashishkpaul]

I have also doubt on the state of 'Default Shipping Address' and 'Default Billing Address' is properly updating or not

[ashishkpaul]

I tried to resolve it, src/routes/account/address-book/index.tsx

import { component$, useContext, useSignal, useVisibleTask$ } from '@builder.io/qwik';
import { useNavigate } from '@builder.io/qwik-city';
import AddressCard from '~/components/account/AddressCard';
import { HighlightedButton } from '~/components/buttons/HighlightedButton';
import PlusIcon from '~/components/icons/PlusIcon';
import { APP_STATE } from '~/constants';
import { Address } from '~/generated/graphql';
import {
  deleteCustomerAddressMutation,
  getActiveCustomerAddressesQuery,
} from '~/providers/shop/customer/customer';
import { ShippingAddress } from '~/types';

export default component$(() => {
  const navigate = useNavigate();
  const appState = useContext(APP_STATE);
  const activeCustomerAddresses = useSignal<{ id: string; addresses: ShippingAddress[] }>();

  useVisibleTask$(async () => {
      const activeCustomer = await getActiveCustomerAddressesQuery();
      const { id, addresses } = activeCustomer;
      const shippingAddresses: ShippingAddress[] = (addresses as Address[]).map(
          (address: Address) =>
              ({
                  id: address.id,
                  fullName: address.fullName,
                  streetLine1: address.streetLine1,
                  streetLine2: address.streetLine2,
                  company: address.company,
                  city: address.city,
                  province: address.province,
                  postalCode: address.postalCode,
                  countryCode: address.country.code, // Updated to countryCode
                  phoneNumber: address.phoneNumber,
                  defaultShippingAddress: address.defaultShippingAddress,
                  defaultBillingAddress: address.defaultBillingAddress,
              }) as ShippingAddress
      );
      activeCustomerAddresses.value = { id, addresses: shippingAddresses };

      if (activeCustomer?.addresses) {
          appState.addressBook.splice(0, appState.addressBook.length);
          appState.addressBook.push(...shippingAddresses);
      }
  });

  return activeCustomerAddresses.value ? (
      <div class="max-w-6xl m-auto rounded-lg p-4 space-y-4">
          <div class="flex flex-wrap gap-6 justify-evenly">
              {[...appState.addressBook].map((address) => (
                  <div class="min-w-[20rem]" key={address.id}>
                      <AddressCard
                          address={address}
                          onDelete$={async (id) => {
                              try {
                                  await deleteCustomerAddressMutation(id);
                                  // Optimistically update state without full page reload
                                  appState.addressBook = appState.addressBook.filter((a) => a.id !== id);
                              } catch (error) {
                                  console.error('Failed to delete address:', error);
                              }
                          }}
                      />
                  </div>
              ))}
          </div>
          <div class="flex justify-center">
              <HighlightedButton
                  onClick$={() => {
                      navigate('/account/address-book/add');
                  }}
              >
                  <PlusIcon /> &nbsp; New Address
              </HighlightedButton>
          </div>
      </div>
  ) : (
      <div class="h-[100vh]" />
  );
});

Now, it is updating and saving the address book, Is it right to do like this ? Hi @gioboa It is also fixing the issue

[gioboa]

it looks good to me you removed country: address.country.code, from shippingAddresses is it correct? would you like to open a PR for that? Thanks

[ashishkpaul]

it looks good to me you removed country: address.country.code, from shippingAddresses is it correct? would you like to open a PR for that? Thanks

Yes, I'm not familiar with creating GitHub pull requests yet, but I'd be happy to learn more about them. Please do it from your end :smiley: