Обновление элемента в кэше Apollo

#reactjs #apollo-client

#reactjs #apollo-клиент

Вопрос:

Я не знаю, как обновить существующий элемент в списке с помощью apollo.

У меня есть список, подобный:

 query TimePerProject($first: Int!, $offset: Int!) {
  timePerProjects(first: $first, offset: $offset) {
    edges {
      node {
        id
        startTime
        stopTime
        project {
          mainorder
        }
        person {
          id
          fullName
        }
      }
    }
    totalCount
  }
}

и запрос мутации с обновлением как:

 mutation UpdateTimePerProject($id: Int!, $projectmainorder: String, $startTime: Datetime, $stopTime: Datetime) {
  __typename
  updateTimePerProject(input: {patch: {projectId: $projectmainorder, startTime: $startTime, stopTime: $stopTime}, id: $id}) {
    clientMutationId
    timePerProjectEdge {
      node {
        id
        startTime
        stopTime
        project {
           mainorder
        }
        person {
          id
          fullName
        }
      }
    }
  }
}

Я пытаюсь использовать мутацию как:

 const [updateWorktime] = useMutation(
    UpdateWorkTimeMutation, {
      update(cache, { data:  { updateTimePerProject: { timePerProjectEdge } } }) {
        cache.modify({
          fields: {
            timePerProjects(existingTimePerProjects = [], { readField }) {
              const newCommentRef = cache.writeFragment({
                data: timePerProjectEdge ,
                fragment: gql`
                  fragment TimePerProject on TimePerProjectsEdge {
                    node {
                      id
                      startTime
                      stopTime
                      project {
                        mainorder
                      }
                    }
                  }
                `
              });
              return [...existingTimePerProjects];
            }
          }
        });
      }}
  );

К сожалению, кажется, что это неправильный путь, поскольку я застрял с ошибкой:

 Error: Could not identify object {"node":{"id":76552,"startTime":"2020-09-23T14:19:44 02:00","stopTime":"2020-09-23T15:53:54 02:00","projectId":"XXXX","person":{"fullName":"person name","__typename":"Person"},"__typename":"TimePerProject"},"__typename":"TimePerProjectsEdge"}

Любые советы, как правильно обновить элемент в списке кэша?

Ответ №1:

Мне не хватало возвращаемого курсора как из исходного запроса, так и из мутации. С обоими из них кэш автоматически распознает обновленную запись без пользовательской функции обновления

Пример (мой API возвращает NodeID в качестве курсора):

 const cache = new InMemoryCache({
  typePolicies: {
    TimePerProject: { keyFields: ['nodeId']},

и запрос будет выглядеть так:

 query TimePerProject($first: Int!, $offset: Int!) {
  timePerProjects(first: $first, offset: $offset) {
    edges {
      node {
        id
        nodeId
        startTime
        stopTime
        project {
          mainorder
        }
        person {
          id
          fullName
        }
      }
    }
    totalCount
  }
}