1

I have a list of contacts where I can add a new contact. As soon a new contact is added, I need to show it on the list of contacts without using refetchQueries. I tried to do this watching on the apollo documentation

addContact(
  data: ContactInputData
): ContactPayload

type ContactPayload {
  status: Int!
  error: ErrorData
  data: ContactResponseData
}

type ContactResponseData {
  id: String!
}

type ContactInputData {
  country: String!
  address: String!
  company: String!
  number: String!
  name: String!
  email: String!
  visibility: Boolean
}

// list of contacts

contacts: ContactListPayload!
type ContactListPayload {
  status: Int!
  error: ErrorData
  data: [Client]!
}
type Client {
  id: ID!
  email: String!
  number: String!
  visibility: String!
  client_id: String!
  country: String!
  profile_picture: String!
  tags: [Tag]!
  notes: [Note]!
}

const formSubmit = async (val: AddContactInputs) => {
    console.log('val', val);
    const response = await addContact({
      variables: {
        data: {
          ...val,
          country: '',
          address: '',
          company: ''
        }
      },
      optimisticResponse: {
        __typename: 'Mutation',
        addContact: {
          __typename: 'ContactPayload',
          data: {
            // not sure the shape of data
          }
        }
      },
      update: (client, { data: { addContact } }) => {
        console.log('client', client);
        console.log('addContact', addContact);
        // if (addContact.status === 201) {}
        // read data from our cache
        const data: any = client.readQuery({ query: CONTACTS });
        console.log('data from cache', data);
        // write our data back to cache with the new contacts in it
        const newData: any = {
          ...data,
          contacts: { ...data.contacts, data: [...data.contacts.data, addContact.data] }
        };
        console.log('newData to write', newData);
        client.writeQuery({ query: CONTACTS, data: newData });
      }
    });
    console.log('response', response)
  };

However, I am confused on the shape of data on optimisticResponse. If you see addContact response model, it just sends id to me. How am i supposed to update the list of contacts where it mainly needs name, email, number?

Serenity
  • 3,884
  • 6
  • 44
  • 87
  • strange requirements as usually response type is extended input type (+id) and contains all required to update data ... even more, usually for deleted record/entity (only id passed) full data is/can be returned/requested ... but you can try to use passed variables ( simply `data: {...data, id:randomID}` ) in optimistic response – xadm Dec 31 '20 at 01:34

0 Answers0