Question

在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和writeQury来提供位置信息，但不太确定该怎么做。

这是我的代码：

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

Answer 1

读取/写入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'
    }
   });
}
});

处理Graphql突变更新，缓存读取和写入查询，如果查询是动态的？

1 个答案: