0

Doing nightlife app on freecodecamp https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app/

I am trying to implement 'Go' button, similarly 'Like' button on Youtube or Instagram. Users click the button the number(counting how many users go) goes up meaning users will go there and click again, it revokes, the number decreases, users will not go there.

It seems like working well except the issue, I have to refresh the page and then, the number has increased or decreased and throws the error like below so:

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"
    },
                     .
                     .
                     .

I am assuming handling update function will fix this issue but unlike the example from Apollo documentation:

// 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]) },
        });
      }}
    >

My query is dynamic:

// 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
    }
  }
`;

I believe I might need to handle to provide location using readQuery and writeQury but not too sure what I should do.

Here's my code:

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;

Full code here https://github.com/footlessbird/Nightlife-Coordination-App

footlessbird
  • 303
  • 2
  • 11

1 Answers1

1

when you read/write the getBars query, you need to pass the location as a variable 

  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'
    }
   });
}
});
benawad
  • 685
  • 7
  • 17