Обработка обновления Graphql Mutation, чтение кеша и запись Query, если запрос динамический? - PullRequest
Новая
       32

Обработка обновления Graphql Mutation, чтение кеша и запись Query, если запрос динамический?

0 голосов
/ 09 октября 2019

Приложение «Ночная жизнь» на freecodecamp https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app/

Я пытаюсь реализовать кнопку «Перейти», аналогично кнопке «Нравится» на Youtube или Instagram. Пользователи нажимают на кнопку, число увеличивается (считая, сколько пользователей). Это означает, что пользователи пойдут туда и снова нажмут, оно отменяется, число уменьшается, пользователи туда не пойдут.

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

Invariant Violation: Can't find field getBars({}) on object {
  "getBars({\"location\":\"vancouver\"})": [
    {
      "type": "id",
      "generated": false,
      "id": "Bar:uNgTjA9ADe_6LWby20Af8g",
      "typename": "Bar"
    },
    {
      "type": "id",
      "generated": false,
      "id": "Bar:CwL5jwXhImT_7K5IB7mOvA",
      "typename": "Bar"
    },
    {
      "type": "id",
      "generated": false,
      "id": "Bar:mdt1tLbkZcOS2CsEbVF9Xg",
      "typename": "Bar"
    },
                     .
                     .
                     .

Я предполагаю,обработка функции обновления решит эту проблему, но в отличие от примера из документации Apollo: 

// GET_TODOS is not dynamic query
// nothing to pass as variables to fetch TODO list

<Mutation
      mutation={ADD_TODO}
      update={(cache, { data: { addTodo } }) => {
        const { todos } = cache.readQuery({ query: GET_TODOS });
        cache.writeQuery({
          query: GET_TODOS,
          data: { todos: todos.concat([addTodo]) },
        });
      }}
    >

Мой запрос динамический: 

// I have to pass location variable, otherwise it won't fetch anything.

const GET_BARS_QUERY = gql`
  query getBars($location: String!) {
    getBars(location: $location) {
      id
      name
      url
      rating
      price
      image_url
      goings {
        username
      }
      goingCount
    }
  }
`;

Я полагаю, что мне может потребоваться обработать, чтобы указать местоположение с помощью readQueryи напишите Qury, но не слишком уверен, что я должен делать.

Вот мой код: 

const GoButton = ({ user, bar }) => {
  const { token } = user;
  const { id, goings, goingCount } = bar;

  const [userGoes] = useMutation(GO_MUTATION, {
    variables: { yelp_id: id },
    update(proxy, result) {
      const data = proxy.readQuery({
        query: GET_BARS_QUERY
      });
      data.getBars = [result.userGoes, ...data.getBars];
      proxy.writeQuery({ query: GET_BARS_QUERY, data });
    }
  });

    return (
    <Button onClick={userGoes}>
      Go {goingCount}
    </Button>
  );
};

const GO_MUTATION = gql`
  mutation go($yelp_id: String!) {
    go(yelp_id: $yelp_id) {
      id
      goings {
        id
        username
      }
      goingCount
    }
  }
`;

export default GoButton;

Полный код здесь https://github.com/footlessbird/Nightlife-Coordination-App

1 Ответ

0 голосов
/ 24 октября 2019

когда вы читаете / пишете запрос getBars, вам нужно передать местоположение как переменную 

  const [userGoes] = useMutation(GO_MUTATION, {
variables: { yelp_id: id },
update(proxy, result) {
  const data = proxy.readQuery({
    query: GET_BARS_QUERY,
    variables: {
        location: 'New York'
    }
  });
  data.getBars = [result.userGoes, ...data.getBars];
  proxy.writeQuery({ query: GET_BARS_QUERY, data,
    variables: {
        location: 'New York'
    }
   });
}
});
...