The 4.0 documentation for useReactiveVar does not match the actual usage, specifically the imports. See https://www.apollographql.com/docs/react/api/react/useReactiveVar#usereactivevar.
Current docs and broken usage:
import { makeVar, useReactiveVar } from "@apollo/client";
export const cartItemsVar = makeVar([]);
export function Cart() {
const cartItems = useReactiveVar(cartItemsVar);
// ...
}See on TypeScript Playground - https://www.typescriptlang.org/play/?ssl=8&ssc=3&pln=1&pc=1#code/AQSwtgDg9gTgLsA3sMBDA1gUwGqpgGmAFcBnTAJU1QGM4QA3HPYAX2ADMYoxgAiAAVTQANsKgB6asJCYAdnF4BuAFDLgmAB7R4walFkkE1PHACScTGBK4YwALwoMTGAAoA2gF0AlCrWbtCOxEsrQg+sAAwiYuXkhqwLr6hrom5pYk9sRklDR0jDYuxvBpVjY+8cDi4sAAdHVqLEA
To get this to work, I have to change the imports to:
import { makeVar } from "@apollo/client";
import { useReactiveVar } from "@apollo/client/react";
export const cartItemsVar = makeVar([]);
export function Cart() {
const cartItems = useReactiveVar(cartItemsVar);
// ...
}See on TypeScript Playground - https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbziAhgawKYDUVTgXzgDMoIQ4ByAARUgBs6IB6AYzuAwDsYKBuAKFCRYiOAFcAzhgBKGFCxjAAbtlwFipctVoQGzNh25MochRX78MAD2HwWEThLu4YASRgYQEnHgC8ydFUoAAoAbQBdAEoBSxtoeCIxTgVgBzgAYRdgyMR+ODh7R2dYd08JOH9JGVNFFR9glhdSrx9ovLgmJjgAOl7+fCA
The 4.0 documentation for
useReactiveVardoes not match the actual usage, specifically the imports. See https://www.apollographql.com/docs/react/api/react/useReactiveVar#usereactivevar.Current docs and broken usage:
See on TypeScript Playground - https://www.typescriptlang.org/play/?ssl=8&ssc=3&pln=1&pc=1#code/AQSwtgDg9gTgLsA3sMBDA1gUwGqpgGmAFcBnTAJU1QGM4QA3HPYAX2ADMYoxgAiAAVTQANsKgB6asJCYAdnF4BuAFDLgmAB7R4walFkkE1PHACScTGBK4YwALwoMTGAAoA2gF0AlCrWbtCOxEsrQg+sAAwiYuXkhqwLr6hrom5pYk9sRklDR0jDYuxvBpVjY+8cDi4sAAdHVqLEA
To get this to work, I have to change the imports to:
See on TypeScript Playground - https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbziAhgawKYDUVTgXzgDMoIQ4ByAARUgBs6IB6AYzuAwDsYKBuAKFCRYiOAFcAzhgBKGFCxjAAbtlwFipctVoQGzNh25MochRX78MAD2HwWEThLu4YASRgYQEnHgC8ydFUoAAoAbQBdAEoBSxtoeCIxTgVgBzgAYRdgyMR+ODh7R2dYd08JOH9JGVNFFR9glhdSrx9ovLgmJjgAOl7+fCA