# Infinite loop in useEffect when mocking GraphQL API

## SYMPTOMS

The code example below caused infinite loop in `useEffect` hook when testing with Jest.

```javascript
jest.mock("libs/api/graphql", () => {
  return {
    ...jest.requireActual("libs/api/graphql"),
    useRelatedItemsLazyQuery: () => {
      return [jest.fn(), { data: { relatedItems: [] } }];
    },
  };
});
```

## FIX

This is because the data returned from the mocked function is a new object every time, and useEffect cannot compare it to the previous value.

The solution that worked for me is to move the response (2nd argument) to a separate variable, and return it every time.

```javascript
jest.mock("libs/api/graphql", () => {
  const response = { data: { relatedItems: [] } };
  return {
    ...jest.requireActual("libs/api/graphql"),
    useRelatedItemsLazyQuery: () => {
      return [jest.fn(), response];
    },
  };
});
```