Реактивные переменные клиента Apollo - не запускать повторную визуализацию после обновления значения

Question

Я пытаюсь использовать реактивные переменные:

Мой файл кеша:

import { makeVar } from "@apollo/client"

export const colorVar = makeVar('red')

Файл A (обновление значения):

import { colorVar } from "cache"
colorVar('green')

Файл B (считывает значение и должен повторно визуализироваться после обновления значения в файле A):

import { colorVar } from "cache"
console.log(colorVar())

Действие обновления в файле A не запускает повторную визуализацию файла B

Answer 1

Файл кеша (используйте этот кеш для ApolloClient):

export const cache: InMemoryCache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        getColor()
          return colorVar();
        }
      }
    }
  }
});
export const colorVar = cache.makeVar('red')

Обновите переменную (файл A):

import { colorVar } from "cache"
 colorVar('green')

Прочтите переменную (файл B):

 const GET_COLOR_Q = gql`
     query readColor {
        getColor @client
    }
  `;

  const { data } = useQuery(GET_COLOR_Q);

  console.log(data?.getColor)

Обновление: из Apollo Client 3.2.0 вы можете использовать перехватчик useReactiveVar для получения данных (файл B):

import { useReactiveVar } from '@apollo/client'
import { colorVar } from "cache"

const color = useReactiveVar(colorVar)
console.log(color)

Answer 2

Вы можете сделать следующее:

      import { useReactiveVar } from "@apollo/client";
import { colorVar } from "cache"

// to read
const color = useReactiveVar(colorVar);

// to update
colorVar(your preferred color)

Answer 3

В качестве небольшого обновления к предыдущим ответам вы можете сделать это более "традиционным" способом реагирования, например:

      import { useReactiveVar } from '@apollo/client'
import { colorVar } from 'cache'

const useColor = () => {
    const color = useReactiveVar(colorVar);
    const setColor = (color) => {
        colorVar(color);
    };

    return [color, setColor];
}