How to update an item after being newly created in AWS DynamoDB and Amplify

Question

I am trying to update a query in AWS Dynamo using AWS Amplify on top of Next.js.

My scenario is simple.

On page load, if there exists a user and the user has not visited a page before, a new object will be created with set values using SWR.

const fetchUserSite = async (owner, code) => {
  try {
    // Create site object if no site exists
    if (userData == null) {
      const siteInfo = {
        id: uuidv4(),
        code: parkCode,
        owner: user?.username,
        bookmarked: false,
        visited: false,
      }

      await API.graphql({
        query: createSite,
        variables: {input: siteInfo},
        authMode: 'AMAZON_COGNITO_USER_POOLS',
      })

      console.log(`${code} added for the first time`)
    }
    return userData || null
  } catch (err) {
    console.log('Site not added by user', data, err)
  }
}


 // Only call the fetchUserSite method if `user` exists
  const {data} = useSWR(user ? [user?.username, parkCode] : null, fetchUserSite)

Currently, this works. The object is added to the database with the above attributes. HOWEVER, when I click a button to update this newly created object, I get an error of path: null, locations: (1) […], message: "Variable 'input' has coerced Null value for NonNull type 'ID!'"

This is my call to update the object when I click a button with the onClick handler "handleDBQuery".

const handleDBQuery = async () => {
  await API.graphql({
    query: updateSite,
    variables: {
      input: {
        id: data?.id,
        bookmarked: true,
        owner: user?.username,
      },
    },
    authMode: 'AMAZON_COGNITO_USER_POOLS',
  })
  console.log(`${name} Bookmarked`)
}

My hunch is that the updateSite query does not know about the createSite query on page load.

In short, how can I update an item after I just created it?

Answer 1

I looked into the code at master branch and follow along as you describe. I found that the data?.id here comes from a state variable and it is set only before the call to createSite . I suggest you try setId again using the data returned from the createSite

Try this

const fetchUserSite = async (owner, code) => {
  try {
    // Create site object if no site exists
    if (userData == null) {
      const siteInfo = {
        id: uuidv4(),
        code: parkCode,
        owner: user?.username,
        bookmarked: false,
        visited: false,
      }

      const { data: newData } = await API.graphql({
        query: createSite,
        variables: {input: siteInfo},
        authMode: 'AMAZON_COGNITO_USER_POOLS',
      });

      setId(newData.id); // <====== here (or setId(siteInfo.id))

      console.log(`${code} added for the first time`)
      return newData; // <======= and this, maybe? (you may have to modify the qraphql query to make it return the same item as in the listSite
    }
    return userData || null
  } catch (err) {
    console.log('Site not added by user', data, err)
  }
}