因此,我试图为从服务器获取数据的编辑组件设置初始状态,现在应该可以在组件状态中编辑.但是当我尝试这样做时:
<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
{({ data, loading, error }) => {
this.setState({ title: data.title })
我陷入无限循环,因为这是渲染.我不应该将组件状态与查询组件一起使用吗？如果没有,那么替代方案是什么？
使用apollo-client查询包装的react组件将自动启动对服务器的数据调用.
我想仅针对特定用户输入发出数据请求.
您可以在查询选项中传递skip选项 - 但这意味着refetch()函数不作为组件的prop提供; 并且似乎不会在prop更新中动态评估skip的值.
我的用法是case是一个map组件.我只希望在用户按下按钮时加载标记数据,而不是在初始组件安装或位置更改时加载.
下面的代码示例:
// GraphQL wrapping
Explore = graphql(RoutesWithinQuery, {
options: ({ displayedMapRegion }) => ({
variables: {
scope: 'WITHIN',
targetRegion: mapRegionToGeoRegionInputType(displayedMapRegion)
},
skip: ({ targetResource, searchIsAllowedForMapArea }) => {
const skip = Boolean(!searchIsAllowedForMapArea || targetResource != 'ROUTE');
return skip;
},
}),
props: ({ ownProps, data: { loading, viewer, refetch }}) => ({
routes: viewer && viewer.routes ? viewer.routes : [],
refetch,
loading
})
})(Explore);
我一直在审查Apollo文档,但我没有看到如何在Apollo客户端中处理服务器错误的信息.
例如,假设服务器要么:
如何在客户端处理？Apollo目前失败,出现以下错误:
未处理(在react-apollo中)错误:GraphQL错误:不能......
我想避免这种情况发生并处理这些错误.我怎么能用React Apollo这样做？
以供参考:
我目前正在使用React-Apollo和Redux.
我正在使用Apollo Client创建一个应用程序来使用Graphql查询我的服务器.我有一个python服务器,我在其上执行我的graphql查询,从数据库中获取数据,然后将其返回给客户端.
我为客户端创建了一个自定义NetworkInterface,帮助我制作定制服务器请求(默认情况下,ApolloClient对我们指定的URL进行POST调用).网络接口只需要有一个query()方法,其中我们返回表单结果的promise Promise<ExecutionResult>.
我能够进行服务器调用并获取所请求的数据但仍然收到以下错误.
Error: Network error: Error writing result to store for query
{
query something{
row{
data
}
}
}
Cannot read property 'row' of undefined
at new ApolloError (ApolloError.js:32)
at ObservableQuery.currentResult (ObservableQuery.js:76)
at GraphQL.dataForChild (react-apollo.browser.umd.js:410)
at GraphQL.render (react-apollo.browser.umd.js:448)
at ReactCompositeComponent.js:796
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:746)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:561)
at Object.performUpdateIfNecessary (ReactReconciler.js:157)
at runBatchedUpdates (ReactUpdates.js:150)
at ReactReconcileTransaction.perform (Transaction.js:140)
at ReactUpdatesFlushTransaction.perform (Transaction.js:140)
at ReactUpdatesFlushTransaction.perform …我们目前正在从Relay转向React Apollo 2.1,而我正在做的事似乎很可疑.
上下文:只有在用户通过身份验证(通过API密钥)时才能呈现某些组件,因此有一个Authenticator组件可以保护树的其余部分.
在App.js,它被这样使用(显然下面的所有片段都是最小的例子):
import React from 'react';
import Authenticator from './Authenticator';
import MyComponent from './MyComponent';
export default function App({ apiKey }) {
return (
<Authenticator apiKey={apiKey}
render={({ error, token }) => {
if (error) return <div>{error.message}</div>;
if (token) return <MyComponent token={token} />;
return <div>Authenticating...</div>;
}}
/>
);
}
如果身份验证成功,MyComponent则会进行呈现.
Authentication在第一次渲染/挂载时将身份验证突变发送到服务器,并相应地调用渲染道具.
Authentication.js看起来像这样:
import gql from 'graphql-tag';
import React from 'react';
import { Mutation } …目前我有一个useLazyQuery钩子，它在按下按钮时被触发（搜索表单的一部分）。
钩子行为正常，只有在按下按钮时才会触发。但是，一旦我触发它一次，它就会在每次组件重新渲染时触发（通常是由于状态更改）。
因此，如果我搜索一次，然后编辑搜索字段，结果会立即出现，而且我不必再次单击搜索按钮。
不是我想要的用户界面，如果您完全删除搜索文本（因为它试图将搜索文本null作为变量进行搜索），它会导致错误，有什么方法可以防止useLazyQuery在重新渲染时重新获取？
这可以使用useQuery依赖于“搜索”状态来解决，当我单击按钮时，该状态会被切换。但是，我宁愿看看是否可以避免增加组件的复杂性。
const AddCardSidebar = props => {
const [searching, toggleSearching] = useState(false);
const [searchParams, setSearchParams] = useState({
name: ''
});
const [searchResults, setSearchResults] = useState([]);
const [selectedCard, setSelectedCard] = useState();
const [searchCardsQuery, searchCardsQueryResponse] = useLazyQuery(SEARCH_CARDS, {
variables: { searchParams },
onCompleted() {
setSearchResults(searchCardsQueryResponse.data.searchCards.cards);
}
});
...
return (
<div>
<h1>AddCardSidebar</h1>
<div>
{searchResults.length !== 0 &&
searchResults.map(result => {
return (
<img
key={result.scryfall_id}
src={result.image_uris.small}
alt={result.name}
onClick={() => setSelectedCard(result.scryfall_id)}
/> …我正在使用 react 和 apollo 客户端建立一个新的打字稿项目。我正在尝试像这样连接客户端：
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: 'http://localhost:3000/graphql',
headers: {
authorization: localStorage.getItem('token'),
},
}),
});
function App() {
return (
<ApolloProvider client={client}>
<div className="App">
...content goes here
</div>
</ApolloProvider>
);
}
但是，这会在运行时引发错误：
TypeScript error in /src/App.tsx(60,21):
Property 'setLink' is missing in type 'ApolloClient<NormalizedCacheObject>' but required in type 'ApolloClient<any>'. TS2741
58 | function App() {
59 | return (
> 60 | <ApolloProvider client={client}>
| ^
61 | <div className="App">
由于这似乎是一个基于类型的问题，因此我在根据此处的示例创建 …
我有一个基于getAllItems查询的过滤项目列表,它将过滤器和一个order by选项作为参数.
创建新项目后,我想删除此查询的缓存,无论传递什么变量.我不知道该怎么做.
我不认为更新缓存是一种选择.Apollo Client文档中提到的方法(在变异后更新缓存,refetchQueries和更新)似乎都需要一组给定的变量,但由于过滤器是一个复杂的对象(带有一些文本信息),我需要更新缓存对于先前提交的每组给定变量.我不知道该怎么做.另外,只有服务器确实知道这个新项目如何影响分页和排序.
我不认为fetch-policy(例如将其设置为cache-and-network)是我正在寻找的,因为如果在创建新项目后访问网络是我想要的,那么当我只是过滤列表时(输入要搜索的字符串),我想保持默认行为(cache-only).
client.resetStore会为所有类型的查询(不仅是getAllItems查询)重置商店,所以我不认为这也是我正在寻找的.
我很确定我在这里遗漏了一些东西.
我需要一些帮助,使用Apollo 2.1中的新Query和Mutation组件,特别是有多个查询和突变.
我有以下问题:
我在next上使用apollo，最近我注意到自定义路由破坏了SSR。通常，如果您浏览页面，则阿波罗会缓存查询，而当您下次访问页面时，它将处理缓存中的所有内容。但是，对于自定义路由，永远不会使用缓存。
我还注意到，当我单击这些页面时，控制台中会闪烁一个错误。但是它很快消失了，我无法在这里复制它。
Server.js
//
server.get('/about-us', (req, res) => app.render(req, res, '/about'));
server.get('/about', (req, res) => res.redirect(301, '/about-us'));
菜单点击处理程序
const navigate = link => () => {
Router.push(link);
};
菜单项
export const menu = [
{
name: 'Home',
url: '/',
},
{
name: 'Catalogs',
url: '/catalogs',
},
{
name: 'Shop',
url: '/shop',
},
{
name: 'Wholesale',
url: '/wholesale',
},
{
name: 'About Us',
url: '/about-us',
prefetch: true,
},
{
name: 'Contact Us',
url: '/contact-us',
prefetch: true,
},
];
根据nextjs频谱的建议，我尝试在TopNav组件中预取自定义页面，但没有成功。
const prefetch …react-apollo ×10
apollo ×4
graphql ×4
javascript ×4
reactjs ×4
express ×1
next.js ×1
node.js ×1
react-hooks ×1
typescript ×1