首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将变量直接注入到从React-Apollo <突变/>组件传递的函数中,而不是作为道具

在React-Apollo中,突变(Mutation)组件用于执行GraphQL突变操作。通常情况下,我们将变量作为道具(props)传递给突变组件,然后在组件内部使用这些变量。

然而,有时候我们希望将变量直接注入到从React-Apollo突变组件传递的函数中,而不是作为道具。这可以通过使用高阶组件(Higher-Order Component,HOC)来实现。

下面是一个示例代码,演示了如何将变量直接注入到突变组件传递的函数中:

代码语言:txt
复制
import { graphql } from 'react-apollo';
import { gql } from 'apollo-boost';

// 定义GraphQL突变操作
const mutation = gql`
  mutation UpdateUser($id: ID!, $name: String!) {
    updateUser(id: $id, name: $name) {
      id
      name
    }
  }
`;

// 创建高阶组件
const withMutation = graphql(mutation, {
  name: 'updateUserMutation',
});

// 定义一个React组件
const MyComponent = ({ updateUserMutation }) => {
  const handleUpdateUser = async (id, name) => {
    try {
      // 直接调用注入的突变函数
      const response = await updateUserMutation({
        variables: { id, name },
      });
      console.log(response.data.updateUser);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <button onClick={() => handleUpdateUser('123', 'John')}>
        Update User
      </button>
    </div>
  );
};

// 使用高阶组件包装React组件
const MyComponentWithMutation = withMutation(MyComponent);

export default MyComponentWithMutation;

在上面的代码中,我们首先定义了一个GraphQL突变操作(mutation)。然后,我们使用graphql函数创建了一个高阶组件,并将突变操作作为参数传递给它。通过name属性,我们为注入的突变函数指定了一个名称(updateUserMutation)。

接下来,我们定义了一个React组件MyComponent,它接收updateUserMutation作为道具。在handleUpdateUser函数中,我们直接调用了注入的突变函数updateUserMutation,并传递了变量idname

最后,我们使用高阶组件withMutation包装了MyComponent,并导出了包装后的组件MyComponentWithMutation

这样,我们就可以在React组件中直接注入变量到突变函数中,而不需要将变量作为道具传递。这种方式可以简化代码,并提高开发效率。

推荐的腾讯云相关产品:腾讯云函数(Serverless Cloud Function),详情请参考腾讯云函数产品介绍。腾讯云函数是一种事件驱动的无服务器计算服务,可以帮助开发者更轻松地构建和运行云端应用程序。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue组件数据通信方案总结

背景 初识Vue.js,了解组件是Vue主要构成部分,但组件内部作用域是相对独立部分,组件之间关系一般如下图: 组件A与组件B,C之间是父子组件组件B,C之间是兄弟组件组件A,D之间是隔代关系...一,道具/ $ emit 1,Prop是你可以在组件上注册一些自定义特性。当一个值传递给一个Prop特性时候,它就变成了那个组件实例一个属性。...,动作也不能直接操作数据,还需要通过Mutation来修改State数据,最后根据State数据变化,来渲染页面。...简单来说,$ attrs里存放是父组件绑定道具属性,$ listeners里面存放是父组件绑定非原生事件。...所以,如果采用是我代码中注释方式,父级名称如果改变了,子组件this.name是不会改变当采用代码插入一个监听对象,修改对象属性值,是可以监听到修改

1.6K50

vue3.0 Composition API 翻译版(超长)

指向组件实例不是methods对象点下方内部函数)。...当state.count在将来某个时间发生突变时,内部函数再次执行。 这是Vue反应系统本质。当您data()组件返回对象时,它会在内部使之具有反应性reactive()。...这是因为JavaScript基本类型是通过值不是通过引用传递 ? 值分配给对象作为属性时,也会发生相同问题。如果一个反应性值在分配为属性或函数返回时不能保持其反应性,那么它将不是很有用。...#缺点 #介绍引用开销 从技术上讲,Ref是此提案引入唯一“新”概念。引入它是为了反应性值作为变量传递,而无需依赖对访问this。... velte代码看起来更简洁,因为它在编译时执行以下操作: 隐式地整个块(import语句除外)包装到为每个组件实例调用函数不是仅执行一次) 隐式注册对可变突变反应性

8.9K10

用TS+GraphQL查询SpaceX火箭发射数据

在查询名后面,你可以通过使用前缀为$及类型去指定变量,然后在查询体,你可以使用该变量。对于我们查询,通过传递 $id 变量来设置启动id,该变量类型为String!。 ?...ID作为查询变量传递 我们传入 id 作为变量,它对应于 LaunchList 查询 flight_number。...我们将用这个组件作为智能组件来保持关注点分离,并且数据传给只显示给定内容表示组件。我们还将在等待数据时显示基本加载和错误状态。...除了 Profile 查询和组件之外,该组件代码与 index.tsx 文件大致相同。我们还将一个变量传递给 React 钩子,用于启动时 id。...我们将在 src/App.tsx 文件包含这些组件,并将 转换为函数组件。用函数组件使其更加简单,并允许我们在添加单击功能时使用钩子。

3K20

我用 React 和 Vue 构建了同款应用,来看看哪里不一样(2020 版)

如果要使用在 ref() 函数内部创建值,我们将在变量上寻找.value 不是简单地调用该变量。换句话说,如果我们想要一个持有状态变量值,我们寻找 name.value 不是 name。...你可能觉得…list 看起来很奇怪:开头三个点称为 spread 运算符,负责 list 所有值作为单独项目传递不是简单地把所有项目打包在一起作为数组传递。感觉有些糊涂吗?...React: 在 React ,我们 props 传递组件创建位置。...遍历后者这里是行不通。 如何数据发射回父组件? React: 我们首先将函数向下传递给子组件,在调用子组件位置将其作为 prop 引用。...然后触发位于父组件函数。我们可以在“如何列表删除项目”部分查看全过程。 Vue: 在子组件,我们只需要编写一个值返回给父函数函数即可。

4.8K30

如何对第一个Vue.js组件进行单元测试 (下)

我们首次测试        让我们来写首个测试。我们首先需要使用shallowMount手动挂载我们组件,并将其存储在我们执行断言变量。...我们还可以通过propsData属性传递道具作为对象。        ...在处理函数,我们绑定每个属性,并在元素上设置一个基于名称和值数据属性。        我们一个对象传递给我们指令,因此我们可以data-test-开始生成数据属性。...首先,让我们强调一些重要东西:我们正在测试定义良好JavaScript函数不是UI。        当您查看单个文件组件时,很容易忘记组件编译成JavaScript函数。...在我们例子,我们组件与任何其他函数没有区别:它接受输入并返回输出。这些原因和后果是我们正在测试不是其他任何东西。        令人困惑是,我们测试与常规单元测试略有不同。

3.3K00

useEffect() 与 useState()、props 和回调、useEffect 依赖类型介绍

它是一种存储数据方式,这些数据会随着时间推移变化,并根据任何变化导致重新呈现。它还允许您在组件声明和更新一段本地状态。...**useState 用于管理组件特定状态, useEffect 则用于处理与组件状态无直接关系但需要根据状态或道具变化触发副作用或操作。这两个函数是构建 React 项目的基本组件。...props和回调 Props(属性缩写)用于数据从父组件传递组件。Props是只读;子组件不能直接修改其 props。它们用于组件之间通信和数据传输。...props 在渲染组件时定义,并作为 JSX 元素属性传递。然后父组件设置并更新其子组件 props。...={isDarkMode} /> ****另一方面,回调涉及函数作为 props 传递给子组件

25630

【19】进大厂必须掌握面试题-50个React面试

Reactrender函数React组件创建一个节点树。然后,它会响应由用户或系统执行各种操作引起数据模型突变来更新此树。该虚拟DOM只需三个简单步骤。...此函数必须保持纯净,即,它必须返回相同结果每次被调用。 13.如何两个或多个组件嵌入一个组件?...道具是ReactProperties简写。它们是只读组件,必须保持纯净即不变。在整个应用程序,它们始终从父组件传递组件。子组件永远无法道具发送回父组件。...但是在语法上存在一些差异,例如: 事件使用驼峰式大小写不是仅使用小写字母命名。 事件是作为函数不是字符串传递。 事件参数包含一组特定于事件属性。...因此,元素无法直接更新其状态,并且其提交由JavaScript函数处理。此功能可以完全访问用户输入表单数据。

11.1K30

详解数据Laravel传送到vue四种方式

在过去两三年里,我一直在研究同时使用 Vue 和 Laravel 项目,在每个项目开发开始阶段,我必须问自己 “我将如何数据 Laravel 传递 Vue ?”。...直接回显数据对象或组件属性 ? 赞成: 简单明了 反对: 必须与嵌入 Blade 模板 Vue 应用程序一起使用 可以说是数据 Laravel 应用程序移动到 Vue 前端最简单方法。...对于 Laravel 5.5+ 使用 json 指令: 使用自定义组件和 Laravel 自身 json blade 指令可以让您轻松地数据移动到道具。...此方法允许您划分 Vue 代码,脚本与 Webpack 或 Mix 捆绑在一起,同时仍可以直接向其中注入数据。 属性作为全局窗口注入 ?...赞成: 在整个 Vue 应用程序和任何其他脚本全局可用 反对: 可能很混乱,通常不建议用于大型数据集 虽然这看起来有点老生常谈,但数据添加到窗口对象可以轻松地创建全局变量,这些变量可以应用程序中使用任何其他脚本或组件访问

8K31

您可能不需要使用Vue 3Vuex

您可以使用reactive函数创建反应变量(替代方法是ref函数)。...provide方法时,该方法任何子组件都可以使用该值inject。...状态可以直接更改,没有限制。 您可以通过使用readonly函数包装状态来使其受到保护。它在Proxy防止任何修改对象覆盖了传递变量(尝试时会发出警告)。...通过保护状态免受不必要修改,新解决方案相对接近Vuex。 摘要 通过使用Vue 3反应性系统和依赖项注入机制,我们已经本地状态转变为可以在较小应用程序替代Vuex集中状态管理。...我们有一个状态对象,该对象是只读,并且对模板更改有反应。只能通过Vuex动作/突变等特定方法来修改状态。您可以使用computed函数定义其他获取器。

1.4K30

React学习(最终篇)—— 高阶应用:高阶组件(HOCs)

常规React组件都是传入props值转换成一个UI返回,高阶组件一个组件转换成另外一个组件。...这个方法应该可以接受一个参数,这个参数外部组件作为一个子组件传入方法,并在方法完成子组件数据订阅功能,例如下面的例子 withSubscription: const CommentListWithSubscription...容器会管理各种各样内容,例如:订阅、状态,以及属性数据传递组件以实现底层组件渲染功能。容器组件是HOCs模式实现一部分,可以HOCs模式看作一个参数化容器组件。...惯例:无关属性值传递包装组件 HOCs为一个组件额外增加了一些特性,但是它不应该影响组件原有的功能。对于一个HOC组件来说,他应该和被包装组件有相似的输入接口、有相同返回。...HOC组件应该将那些外部传入但是与HOC组件功能无关参数按照被包装子组件接口定义方式传递组件

1.6K41

前端系列12集-全局API,组合式API,选项式API使用

请注意,如果您解构 props 对象,解构变量失去反应性。因此,建议始终以 props.xxx 形式访问道具。...返回渲染函数会阻止我们返回任何其他东西。在内部这应该不是问题,但如果我们想通过模板引用将此组件方法公开给父组件,则可能会出现问题。...注册一个回调函数,若组件实例是 []缓存树一部分,当组件被插入 DOM 时调用。 这个钩子在服务器端渲染期间不会被调用。...el.focus()       }     }   } }  [data]选项函数返回对象,会被组件赋为响应式。...为保持一致性,我们推荐使用[模板引用]来直接访问元素不是依赖 $el。

41230

VueJs如何使用provide与inject

props这种方式接收,如果想要一层一层传递,这种方式就会比较麻烦,不灵活 provide与inject就是解决:怎么组件数据,传递组件,实现跨级组件传递数据 在vue3.0里面,同样提供了...provide与inject,使用起来更简单方便,单纯概念上去看,是比较抽象,难以理解 还是要从具体实例出发 01 provide()函数 定义:提供一个值,可以被后代组件注入 实现: 父组件有一个...那怎么样把这个数据传递子孙组件,那么就需要用到inject了 02 inject()函数 定义: 注入一个由祖先(父)组件或整个应用提供值 实现: 接收父(祖)组件传递过来值 inject(第一个参数...,如果默认值本身就是一个函数 那么必须将false作为第三个参数传入,表明这个函数就是默认值,不是一个工厂函数 与注册生命周期钩子API类似,inject()必须在组件setup()阶段同步调用...}} 若使用解构时,则模板直接使用变量 {{name}}--{{website}} 注意 如果是解构变量,想要数据响应式,那么需要使用toRef()或toRefs()数据进行转化为响应式 如下是完整示例

86520

【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

state)和属性(props)之间有何不同 4、什么是高阶组件 5、为什么建议传递给 setState 参数是一个 callback 不是一个对象 6、(在构造函数)调用 super(props...29、使用箭头函数(arrow functions)优点是什么 30、为什么建议传递给 setState 参数是一个 callback 不是一个对象 31、 (在构造函数)调用 **super(...State 可能会随着时间推移发生突变,但多数时候是作为用户事件行为结果。 Props则是组件配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变。...Hooks 出现之后,我们复用逻辑提取到组件顶层,不是强行提升到父组件。...React组件生命周期分为三个不同阶段: 初始呈现阶段:这是组件即将开始其生命旅程并到达DOM阶段。 更新阶段:一旦组件添加到DOM,它可能只在发生道具或状态更改时才更新和重新呈现。

7.6K10

用 Lunchbox 在 vue3 创建一个旋转 3D 地球竟是如此简单

scene.add(mesh) 为了在 Lunchbox.js 应用程序创建相同网格,我们将使用相同类,除了作为组件不是将它们分配给变量并将它们与 Mesh() 类组合,我们将它们嵌套在 组件都使用 args 属性参数作为 props。 argsprop 接受一个参数数组并将其传递组件类构造函数。.../App.vue' createApp(App).mount('#app') 在这里,我们 lunchboxjs 不是 vue 导入 createApp 函数。...转到 App.vue 组件脚本部分并从 Vue 导入 ref 和 Lunchbox 导入 onBeforeRender 函数。...import {ref} from 'vue' import {onBeforeRender} from 'lunchboxjs' 接下来, ref 分配给一个 rotation 变量,并将一个具有以下属性对象传递给它

40610

【React】1981- React 8 种条件渲染方法

这些先进技术通常用于较大应用程序或需要更高抽象级别的特定情况: 误差边界: 错误边界是在其子组件任何位置捕获 JavaScript 错误、记录这些错误并显示后备 UI 不是崩溃组件组件。...08、渲染 Prop 此模式涉及一个作为 prop 传递组件函数,返回一个 React 元素。...它不会自行渲染某些内容,而是接受一个函数作为其“render”属性,并将渲染责任委托给该函数。它还会将“isOnline”状态传递给该函数。...现在,在父组件,我们可以使用 UserOnlineStatus 并向其传递一个函数,以根据用户在线状态呈现我们想要内容。...相反,它将渲染委托给一个 prop(render prop),该 prop 是由父组件(在本例为 App)传递函数

8110

优化 React APP 10 种方法

我们有一个变量resCount,expFunc该count变量useState挂钩中调用。我们有一个输入,可以count在键入任何内容时设置状态。...这是useCallback出现地方,我们将把功能道具传递给useCallback并指定依赖项,useCallback钩子返回函数道具记忆版本,这就是我们传递给TestComp东西。...useCallback检查check变量,如果不相同,其上一个值,它将返回函数传递所以TestComp和React.memo会看到一个新参考和重新渲染TestComp,如果不一样useCallback...10. shouldComponentUpdate() React应用程序由组件组成,组件(通常是App.jsApp)扩展分支。...这样,React为我们提供了一种方法来控制组件重新渲染,不是通过React来控制内部逻辑,这是shouldComponentUpdate方法。

33.8K20

精读《我不再使用高阶组件

可能这是 JSX 与 template 之间差异吧,也是变量与字符串之间差异,变量同名但含义不同,所以可抽象,模版靠规则和名称确定含义。...高阶组件特点是,JSX 描述子元素,会注入父级组件 this.props.children ,因此可以无入侵增强组件能力,常用比如权限、跳转、埋点、异常、描述、注入等等。...2 内容概要 高阶组件由于可嵌套,如果有一环高阶组件没有内部 wrappedComponent 暴露出来,会导致后续叠加高阶组件都无法获取、注入原始组件。...state = { coffee: "Americano" }; render() { return this.props.children(this.state.coffee); } } 直接函数作为子元素...renderProps 为了解耦,让控制权从上到下传递底层实现不需要了解上层实现,这是解决 JSX 修改组件模版问题方法之一,作为优化点之一,可以考虑让传入 props 自身作为一个组件: const

41120

Vue组件最常见通信方式

prop/$emit   父组件通过prop方式向子组件传递数据,通过$emit子组件可以向父组件通信。 ?   ...$attrs和$listeners   当需要用到AC跨级通信时,我们会发现prop传值非常麻烦,会有很多冗余繁琐转发操作;如果C状态改变还需要传递给A,使用事件还需要一级一级向上传递,代码可读性就更差了...我们首先定义了两个msg,一个给子组件展示,另一个给孙组件展示,首先将这两个数据传递组件,同时两个改变msg函数传入。 ?   ...provide/inject是vue2.2+版本新增属性,简单来说就是父组件通过provide来提供变量, 然后再子组件通过inject来注入变量。...我们通过父组件elFormItem本身注入组件,子组件通过inject获取父组件本身然后动态地计算buttonSize。

1.6K20
领券