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?