Apollo Client Reactive变量-更新值后不触发重新呈现

时间:2020-10-08 06:39:27

标签: reactjs apollo-client reactive-variable

我正在尝试使用反应变量:

我的缓存文件:

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的重新呈现

3 个答案:

答案 0 :(得分:2)

缓存文件(将该缓存用于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"

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

// write
colorVar('green')

答案 1 :(得分:1)

您可以执行以下操作:

NSDecimalNumber* decimalValue = [[NSDecimalNumber alloc] initWithDecimal:@(value).decimalValue]; // 15 x 10^-2
NSDecimalNumber* decimalMultiplier = [[NSDecimalNumber alloc] initWithDecimal: @(multiplier).decimalValue]; // 10 x 10^2
NSDecimalNumber* decimalResult = [decimalValue decimalNumberByMultiplyingBy:decimalMultiplier];
NSLog(@"%f", decimalResult.floatValue); // 15.000000

答案 2 :(得分:1)

作为对之前答案的一个小更新,您可以使用更“传统”的 react-hooks 方式进行操作,如下所示:

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

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

    return [color, setColor];
}