Блог

У меня есть список контактов, в который я могу добавить новый контакт. Как только добавляется новый контакт, мне нужно показать его в списке контактов без использования refetchQueries . Я пытался сделать это, просматривая документацию apollo

 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)
  };
 

Тем не менее, я запутался в форме данных optimisticResponse . Если вы видите модель ответа addContact, она просто отправляет мне идентификатор. Как я должен обновлять список контактов, где в основном требуется имя, адрес электронной почты, номер?