可以让ApolloProvider提供给状态而不是属性吗？
ApolloProvider是一个React组件，它用于将Apollo Client的状态提供给整个应用程序。它通过将Apollo Client实例作为prop传递给React组件树中的所有组件，使得这些组件能够访问和操作GraphQL数据。
ApolloProvider的主要作用是将Apollo Client的状态注入到React应用程序中，以便应用程序的各个组件可以使用和更新该状态。它通过使用React的上下文（context）功能来实现这一点。
在React中，组件之间通过props进行数据传递。而ApolloProvider的作用是将Apollo Client的状态作为上下文提供给组件，使得组件可以直接访问和使用该状态，而不需要通过props进行传递。
因此，ApolloProvider提供的是状态而不是属性。它将Apollo Client的状态注入到React组件树中，使得组件可以直接访问和使用该状态，而不需要通过props进行传递。
关于ApolloProvider的更多信息和使用示例，可以参考腾讯云的ApolloProvider产品介绍页面：ApolloProvider产品介绍。
相关·内容
经过6到8个小时的努力，我开始求助了。我只想查询我的graphql服务器和作为道具输入到我的react组件中的响应数据(参见ParameterBox.js)。请让我知道我做错了什么。
供参考: INDEX.JS文件(可能正确)
import React from 'react';
import ReactDOM from 'react-dom';
import {
ApolloClient,
createNetworkInterface,
ApolloProvider,
} from 'react-apollo';
imp
浏览 2提问于2017-09-24得票数 0
回答已采纳
嘿，伙计们，我对打字比较陌生，我希望我没有忽略一些明显的东西，这里。:)
我试图将阿波罗添加到一个类型记录项目中，以便能够使用GraphQL API中的数据。到我想要跟踪的医生那里。
我遇到的问题是，一旦我试图在我的ApolloProvider呈现方法中使用ReactDOM，类型记录就会抱怨(在ApolloProvider行)，并出现下面的错误。
it 2607:JSX元素类不支持属性，因为它没有“props”属性
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient }
浏览 0提问于2018-04-24得票数 4
使用apollo和react，我想根据(远程) apollo查询的结果更新我的本地apollo状态。
查询的类型为[String!]!，我的本地州包含类型为String的{ name }。我希望将本地{ name }分配给查询返回的第一个项目。
const App = compose(
graphql(gql`{ name @client }`, { name: 'localData' }),
graphql(gql`{ currencies { name } }`)
)(({ localData }) => <h1>{ localData.n
浏览 5提问于2018-11-23得票数 0
我正在开发一个next.js应用程序，我的页面布局正在经历以下层次结构：
_app.js
Page.js
Header.js
PageContent.js
我需要在不使用redux的情况下将一些参数从PageContent传递到头。
在_app.js内部，我有以下内容：
class Main extends App {
render() {
const {
Component,
pageProps,
apollo,
router: { route }
} = this.props;
return
浏览 4提问于2020-01-10得票数 5
2回答
Ex1： <ApolloProvider client={client}>
<App />
</ApolloProvider> Ex2： <SomeConnectionComponent someprop={something}>
<SomeStateFullComponent/>
</SomeConnectionComponent > 在这两个示例中，为什么要将应用程序和SomeStateFullComponent包装在ApolloProvider和SomeConnectionComponent中？这里应用
浏览 16提问于2020-07-06得票数 0
1回答
有状态组件在Query组件重取时释放其状态是正确的吗？是否必须对Query组件中的所有组件使用阿波罗客户端状态？
下面是一个小演示： (增加计数，然后重取计数将被重置)
下面是演示代码的主要部分：
<ApolloProvider client={client}>
<div className="App">
<Query query={GET_ALL_FILMS}>
{({ data, loading, refetch }) => {
if (loading) return "Loading
浏览 1提问于2019-03-05得票数 2
回答已采纳
"apollo-cache-inmemory": "^1.6.2",
"apollo-client": "^2.6.3",
我使用client.subscribe方法设置了一个简单的订阅，并尝试用client.writeQuery方法更新存储。
export default class App extends Component<Props> {
componentDidMount() {
this.purchaseSubscription = client.subscribe({
query:
浏览 0提问于2019-07-03得票数 0
回答已采纳
1回答
我试图用nextjs13设置一个graphql前端应用程序，但是使用新的文件夹结构，因为没有_app.tsx，我想知道如何设置
在我们像这样包装整个应用程序之前
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
现在该怎么安排呢？
浏览 8提问于2022-11-04得票数 0
回答已采纳
我正在尝试将react组件传递给ApolloProvider以供使用。我使用的是typescript，所以需要正确声明类型等。 我的想法是做以下事情 import { ApolloClient } from 'apollo-client';
import { Component } from 'react';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { Ap
浏览 32提问于2019-06-17得票数 0
我得到了这个错误在我的SSR应用程序的初始加载：Warning: Text content did not match. Server: "SOME DATA" Client: "Loading..."如何初始化客户端的应用程序，而不设置loading标志为真？
我正在建立一个带有反应，快递和阿波罗的SSR系统。我从呈现器服务器获得了一个正确呈现的HTML，但是当客户机包加载时，它试图重新获取数据。水化设置并将来自呈现服务器的所有数据注入页面的HTML中。
/index.js
<Query query={GET_USERS} variables={quer
浏览 0提问于2019-01-10得票数 13
我目前的设置是：
import {
ApolloClient,
ApolloProvider,
gql,
HttpLink,
} from '@apollo/client';
import fetch from 'node-fetch';
import { Agent } from 'https';
...
const agent = new Agent({
rejectUnauthorized: false,
});
const httpLink = new HttpLink({
uri: process.env.R
浏览 7提问于2020-10-13得票数 0
回答已采纳
我正在使用MERN和GraphQL阿波罗创建一个完整的堆栈应用程序。为了连接后端到客户端，我使用的是阿波罗客户端。这是密码-
ApolloProvider.js
import React from "react";
import App from "./App";
import {
ApolloClient,
createHttpLink,
InMemoryCache,
ApolloProvider,
} from "@apollo/client";
const httpLink = createHttpLink({ uri:
浏览 2提问于2020-10-27得票数 2
回答已采纳
我有一个简单的还原器，它只定义一个默认变量“主题”，只返回这个值：
appreducer.js
const initialState = {
theme: 'skyhola',
};
export default (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
在不是主App.js的组件上，我可以读取以下状态：
import React, { Component } from 'react';
i
浏览 6提问于2017-10-06得票数 0
回答已采纳
所以，我正在通过ApolloProvider路过商店
<ApolloProvider store={store} client={apolloClient}>
现在，ApolloProvider把它，商店，放在客户端。但它放置的是store对象，而不是实际的reducer对象。因此，我得到了以下内容，这对我来说似乎很奇怪。
client
---> store
-----------> getState
-----------> dispatch
但是没有“状态”？我的意思是，当然，如果我会调用getState()，但这似乎与我通常在没有Apoll
浏览 2提问于2017-09-10得票数 1
1回答
我得到了“不可更改的违规行为:目标容器不是DOM元素”。同时在ReactJS中进行渲染。
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/edit/:id' component={Edit} /&
浏览 0提问于2019-04-22得票数 0
回答已采纳
在我的React应用程序中，我在ApolloProvider中有下面的index.js设置。连接到阿波罗服务器很好。
import { React } from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';
import { createHttpLink } fro
浏览 11提问于2022-07-09得票数 3
回答已采纳
因此，我试图让Nuxt查询我的GQL站点菜单。我正在通过我的nuxtServerInit存储模块中的index.js函数来完成这个任务。
就像这样：
menuLocations = ["MAIN_MENU", "WORK_MENU"]
store.dispatch("menus/QUERY_MENUS", menuLocations)
它从我的QUERY_MENUS存储模块调用我的menus.js操作。这方面的代码如下：
// Define State defaults
export const state = () => ({
l
浏览 0提问于2019-05-02得票数 1
回答已采纳
1回答
与有一些问题。
我看到所有组件都是相互独立的，但我需要在所有屏幕上都有一个类似于HOC的组件。
例如，如果我没有连接，我希望只显示一个屏幕，如果连接可用，则显示基于当前选项卡的应用程序。
我该怎么做？
谢谢你的建议。
寄存器组件代码
const registerScreens = (appType, store) => {
switch (appType) {
case appTypes.ROOT_APP: {
Navigation.registerComponent(screens.APP, () => App, store, ApolloProvider
浏览 0提问于2018-02-09得票数 1
回答已采纳
我试图在android模拟器中运行一个React Native应用程序，但得到了这个错误：
下面是我的应用react原生应用的设置：
import React from 'react';
import { UIManager } from 'react-native';
import { ApolloProvider } from 'react-apollo';
import { ThemeProvider } from 'styled-components';
import { store, client } fro
浏览 10提问于2017-08-24得票数 0
回答已采纳
1回答
我想使用Apollo本地状态来保存信息，以跟踪用户是否登录。
所以我用clientState修改了Apollo客户端，如下所示。
clientState: {
defaults: {
loggedIn: 'false',
},
resolvers: {
Mutation: {
toggleLoggedIn(_: any, variables: any, { cache }: any) {
// read the cart open value from the cache
c
浏览 0提问于2019-01-23得票数 2
1回答
下面是返回我的路由的函数： ...
import { Route, Switch, Redirect } from "react-router-dom"
import { ApolloProvider } from "@apollo/client";
import { MuiThemeProvider } from '@material-ui/core/styles';
...
function Routes(props) {
return (
<Switch>
<Route path=
浏览 95提问于2021-05-07得票数 1
2回答
基于盖茨比的阿波罗认证
、、、、
我正试图像以前在其他项目中一样，实现中正式描述的身份验证工作流，但这次使用的是Gatsby。
这个想法似乎很简单。需要创建/更新gatsby-browser.js，就像使用时一样，但需要初始化ApolloClient并通过ApolloProvider。
类似于：
import React from 'react'
import { Router } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from &
浏览 0提问于2018-05-30得票数 2
当我使用react-router转到一个功能组件时，它渲染了两次。但是，当我刷新该组件的页面时，它只呈现一次。
对于测试，创建了空的功能组件，如下所示：
import React from 'react'
const TestFunctional: React.FC<any> = () => {
console.log('Test===>>>') // console log twice when navigate to this component
return <></>
}
expor
浏览 1提问于2021-08-06得票数 1
1回答
我定义了一个上下文提供程序来包装我的<App/>组件，如下所示： // index.ts
ReactDOM.render(
<ApolloProvider client={client}>
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>
</ApolloProvider>,
document.getElementById(&
浏览 20提问于2021-04-13得票数 0
回答已采纳
我是否可以同时使用from 'react-redux'和from 'react-apollo'包装我的应用程序，或者应该选择其中之一？
我读过几个关于使用阿波罗进行乐观UI的例子，将其与在redux中创建相同的结果以及所需的工作量进行对比。
我已经在应用程序中使用了redux和redux-saga，并且正在考虑是否应该使用阿波罗客户端来做更多的事情，而不仅仅是提出请求。
下面是我正在做的事情的代码示例：
return (
<ApolloProvider client={client}>
<Provider store={
浏览 0提问于2018-10-02得票数 2
回答已采纳
因此，当涉及到几个布尔人时，我试图使用我的“中介”类作为我的服务和VM的中间角色。
在我的调解员中，我们有：
private bool isAddGroupChecked = false;
public bool IsAddGroupChecked
{
get { return isAddGroupChecked; }
set
{
isAddGroupChecked = value;
NotifyPropertyChanged();
}
}
我的服务通
浏览 2提问于2019-09-26得票数 0
回答已采纳
当我试图编译我的react应用程序时，我遇到了truoble。当我编译应用程序时，我收到以下错误：Module not found: Can't resolve './registerServiceWorker
这是我的index.js文件：
import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from "apollo-boost"
import {ApolloProvider} from "react-apoll
浏览 0提问于2018-12-09得票数 7
回答已采纳
我已经搜索了整个StackOverflow，看到了类似的问题，但还没有找到一个有效的解决方案。想知道是否有人有一个可行的解决方案？我在localhost:3000上开发了一个创建react应用程序，并试图通过我的Apollo客户端访问不同站点上的URI (我正在使用进行测试)。
我已经将'no- CORS‘的fetchOptions模式添加到我的新ApolloClient实例中，但在我的控制台中仍然收到CORS错误。我的enitre index.js文件如下：
import React from 'react';
import ReactDOM from 're
浏览 0提问于2019-09-11得票数 14
我的项目需要使用两个不同的graphQL客户端来实现。 我试图将客户端实例作为一个选项添加到useQuery钩子中。然而，这并不起作用，并导致无限的渲染和网络调用。 const client1 = new ApolloClient({
link: from([authLink, errorLink, httpLink]),
cache: new InMemoryCache(),
});
const {data, error} = useQuery(GET_COLLECTIONS, {
浏览 14提问于2021-07-25得票数 0
这是我的密码。
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { createHttpLink } from "apollo-link-http";
import { render } from "react-dom";
import React from "react";
import RouteCollector from "./routeCollector";
import "
浏览 3提问于2020-07-27得票数 1
回答已采纳
在我的角控制器中，我实现了一个监听器，它通过引用调用一个函数：
$scope.$on('$destroy', vm.popoverChooseProfile.remove);
我用卡玛和茉莉花做了个测试。
it('should remove the popover the scope is destroy', function() {
var vm = createController();
vm.popoverChooseProfile = MOCK_POPOVER;
spyOn(vm.popoverChooseProfile,
浏览 2提问于2015-06-11得票数 4
回答已采纳
2回答
材料用户界面有一个奇怪的问题。自定义主题不适用，我尝试将主题提供程序包装为应用程序的多个不同级别来排除故障，但它没有应用，这影响到所有组件--按钮、appbar等。
我还注意到我的警报缺少背景颜色。
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";
import App from
浏览 11提问于2022-04-06得票数 0
我正在尝试将graphql突变添加到组件的道具中。 export default graphql(logOnMutation)(Login); 上面的那行代码不起作用。未显示错误，但不提供组件属性的变异函数。 但是如果我这样写的话： const logOnWithMutation = graphql(logOnMutation)(Login);
export default logOnWithMutation; 然后像这样写 const App = () => {
return (
<ApolloProvider client={client}>
&
浏览 4提问于2020-03-24得票数 0
回答已采纳
情况
由于兼容问题，我使用ApolloClient来形成AWS AppSync API客户端，这样我就可以使用ApolloProvider将客户机传递给不同的子组件。
在子组件中，我调用useQuery来获取数据，但问题是输出总是给出默认的“未定义”值。
顶层代码
import awsconfig from '../aws-exports';
import { AUTH_TYPE } from 'aws-appsync';
import {
ApolloProvider,
ApolloClient,
ApolloLink,
HttpLink,
浏览 12提问于2021-03-10得票数 2
3回答
下面的代码将使用户下载.doc文件
<a href="http://something.abc/file.doc">Download</a>
我想要创建一个链接，让用户下载.html文件
你知道怎么做吗？
浏览 7提问于2014-05-14得票数 1
回答已采纳
这是我的app.js
import React from 'react'
import { Provider } from 'react-redux'
import { View } from 'react-native'
import { createStore, applyMiddleware } from 'redux'
import ReduxThunk from 'redux-thunk'
import Reducers from './redux'
import Routes from
浏览 2提问于2019-09-20得票数 3
1回答
我正在开发一个微前端应用程序。我们正在构建一个库来管理我们所有的用户数据、权限、角色等。 <ApolloProvider client={userManagementClient}>
{children}
</ApolloProvider> 这将在许多应用程序中使用，它看起来像这样： <ApolloProvider client={appClient}>
<UserManagementProvider><App /></UserManagementProvider>
</ApolloProvider>
浏览 33提问于2020-10-16得票数 2
回答已采纳
1回答
我是阿波罗的新手，遇到了一个我不知道如何在网上搜索的问题。
我的目标是在apollo-link-state中存储一个对象数组，我可以通过我的React应用程序中的任何地方访问这些对象。当我尝试从阿波罗的状态访问单个字符串时，它可以工作，但是当我试图访问对象数组时，我在控制台中得到了一些奇怪的条目，而对象是以未定义的形式出现的。
下面是我遇到的问题的简化代码沙箱示例：
任何帮助或想法都将不胜感激！
为了保存永久记录，我还将显示下面的代码：
index.js:
import React, { Component } from "react";
import ReactDOM fro
浏览 1提问于2018-11-17得票数 0
回答已采纳
我有一个附加了v-model和v-on:change的文本输入。当用户输入时，我在data中更新了一个数组，UI被绑定到该数组。我还想调用一个方法，通过AJAX发送用户输入。发送到服务器的数据是计算属性的结果。
<div id="app">
<input
id="user-input"
type="text"
v-model="userInput"
v-on:change="process()">
<ul id="pa
浏览 0提问于2017-12-18得票数 10
回答已采纳
我有一个签名屏幕组件，在用户未登录时，默认情况下要显示该组件。登录后，我想重定向到主页。下面是createStackNavigator设置：
const MainStack = createStackNavigator(
{
Home: { screen: TabStack },
User: { screen: UserProfile },
Login: {screen: SignIn },// Want to access navigation prop in this component
Post: { screen: Post },
},
{
浏览 2提问于2020-03-09得票数 0
1回答
不能用嵌套值设置阿波罗本地状态
、、、、
我正在用React测试阿波罗图形to，并试图用一个嵌套对象更新本地状态。我遇到了一个问题。数据返回一个null值，甚至不返回我设置为默认值的值。我看到的唯一警告是Missing field __typename。我不知道我缺少了什么，或者这是不是您正确地使用Graphql或阿波罗问题设置嵌套值的方式。我有一个代码沙箱和我想要做的示例
index.js
import React from "react";
import ReactDOM from "react-dom";
import ApolloClient from "apollo-boost"
浏览 8提问于2019-09-19得票数 2
回答已采纳
我有下面的提供者/钩子， interface IAccessTokenContext {
accessToken: string
setAccessToken: (token: string) => void
}
const accessTokenContext = createContext<IAccessTokenContext | null>(null)
export const AccessTokenProvider: FC = ({ children }) => {
const [accessToken, setAccessToken] =
浏览 13提问于2019-10-02得票数 2
2回答
我正在尝试找出在我的React应用程序中处理身份验证和路由的最佳方法。我使用了和概述的方法，其他人扩展了他的方法。
基本上，您有一个用于身份验证的上下文和一个用于已验证用户信息的上下文。如果用户通过身份验证，则呈现<AuthenticatedApp />，如果不存在用户信息，则呈现<UnauthenticatedApp/>。
不同提供商的分类如下：
AppContext.js
const AppProvider = ({ children }) => (
<Router>
<ApolloProvider client={client
浏览 2提问于2021-01-28得票数 1
1回答
我已经创建了多个组件，它们在同一级别上，这使得我很难在它们之间传递数据。HealthForm组件有一个输入字段，该字段接受主机url，然后在单击按钮时获取API。所有这些都很好。我需要的是把这个url传递给所有其他组件(ProductForm，xForm，yForm，zForm.)我现在拥有的是我的后端服务器保存了url，但这会产生影响，因为多个浏览器都在使用该网页。
我认为需要更改的是使HealthForm成为其他表单的父组件。然而，我的App.js看起来像这样，里面只有路径。一个单独的HeaderTabs链接到正确的路线..。
编辑代码现在成功地保存并将url传递给它的子组件。问题是，当我
浏览 0提问于2018-07-28得票数 0
1回答
目前，我在查询我的Nexus GraphQL后端时遇到了一个问题。在我的前端，我使用阿波罗-boost(阿波罗客户端)运行查询。在一个简单的例子中，我试图从后端获取数据，但是它不起作用，我找不到问题。我做错了什么吗？这是我的密码：
TypeError:对象(.)不是一个函数
353 |
354 | function useBaseQuery(query, options, lazy) {
355 | if (lazy === void 0) { lazy = false; }
> 356 | var context = useContext(getApollo
浏览 13提问于2020-08-10得票数 1
我有一个像手风琴一样的无状态部件。在单击容器div时，我会在一些子组件上切换几个css类。它可以直接更改dom中的类吗?还是应该将这个无状态组件转换为有状态组件并通过状态处理类切换？
import React, {PropTypes} from "react"
const Accordian = ({children,label,align}) => {
return(
<div class={"accordian-tab " + (align === "left" ? "accordian-
浏览 4提问于2016-10-21得票数 0
回答已采纳
出于一个奇怪的原因，每当我执行一个变异时，我都会得到400代码。 下面是我的httpLink代码 // ApolloProvider.js
const httpLink = createHttpLink({
uri: 'http://localhost:3000/graphql',
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
}); 然后我在下面的相同文件中应用它 // ApolloProvider.js
export defaul
浏览 17提问于2021-01-06得票数 0
2回答
在兄弟姐妹之间传递数据回响应本机
、、、、
我有一个问题，在反应本机，我想要共享一个数组之间的两个兄弟组件。我的应用程序有一个底部导航导航器，因为我定义了要导航的组件：
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";
import { createBottomTabNavigator } from "react-navigatio
浏览 1提问于2018-09-26得票数 0
回答已采纳
因此，我的应用程序在打包到类后，不再呈现到屏幕上，也不会发出错误。只显示一个空白屏幕。
我在看什么？
webpack.config
var path = require('path');
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client&#
浏览 0提问于2017-06-02得票数 0
回答已采纳
我试着用反应把我的头绕在阿波罗身边。我怎样才能给我当地的阿波罗商店添加状态呢？
我在用流星。它在客户端提供一个函数来测试用户是否登录，如果他们使用Meteor.userId()返回他们的id。我需要在许多不同的组件中访问这个状态。
这是我的客户文件：
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { ApolloProvider } from 'react-apoll
浏览 1提问于2018-01-19得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
