我对如何构建我的 React/GraphQL (Apollo) 应用程序感到有点困惑，因为在用户验证/登录之前不应建立连接。
目前我有这个：
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<Provider store={store}>
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Log In</Link></li>
<li><Link to="/signup">Sign Up</Link></li>
</ul>
<AuthenticatedRoute exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
<Route path="/signup" component={SignupPage} />
</div>
</Router>
</Provider>
</ApolloProvider>
);
}
}
这是网络接口的创建：
const networkInterface = createNetworkInterface({
uri: process.env.NODE_ENV === 'development'
? 'http://localhost:3000/graphql'
: 'TBD',
});
networkInterface.use([
{
applyMiddleware(req, next) {
if (!req.options.headers) {
req.options.headers = {}; // Create the header object …有没有办法让我们可以在不重新获取的情况下更改查询中的变量？
我的用例是当您有一个轮询查询并且您想根据用户的操作跳过或包含查询的一部分时。
例如
const USER_STATS = gql`
query userStats($withDetailedStats:Boolean!) {
user {
stats {
...stats
}
detailedStats@include(if:$withDetailedStats) {
...detailedStats
}
}
}
`;
class Example extends React.PureComponent {
render() {
return (
<Query
query={query}
variables={{ withDetailedStats: false }}
pollInterval={5000}
>
{
({ data, refetch, loading }) => {
if (loading) { return 'Loading...'; }
const { user } = data;
return (
<div>
<div>{user && user.stats}</div>
<Button onClick={this.openModal}>More Details</Button>
<Modal
onOpen={() => { refetch({ withDetailedStats: true }); }}
onClose={() => …我希望能够在对象仍在创建时对其进行更新。
例如：假设我有一个待办事项列表，我可以在其中添加带有名称的项目。我还希望能够编辑项目的名称。
现在假设连接速度较慢的用户创建了一个项目。在这种情况下，我会触发一个创建项目突变并乐观地更新我的 UI。这很好用。目前没有问题
现在假设由于网络缓慢，创建项目突变需要一些时间。在那个时候，用户决定编辑他们刚刚创建的项目的名称。对于理想的体验：
我可以通过等待创建变更完成（这样我可以获得项目 ID）来实现 #2，然后进行更新名称变更。但这意味着我的 UI 的一部分将保持不变，直到创建项目突变返回并且更新名称突变的乐观响应开始。这意味着 #1 不会实现。
所以我想知道如何使用 Apollo 客户端同时实现 #1 和 #2。
注意：我不想添加微调器或禁用编辑。我希望应用程序即使在连接速度较慢的情况下也能做出响应。
我一直在想办法实现react-apollo <Mutation>组件的提交功能。在那里找到了一些对于这个简单任务来说似乎有点矫枉过正的例子，包括this和this。由于我是刚开始学习 React 的新程序员，更不用说 Formik 甚至 HOC（我想这是要走的路？），我无法真正理解这些示例以及如何使它们适应我的模拟Hello world代码。
这是我的注册表单：
import React, { Component } from "react";
import { withFormik, Form, Field } from "formik";
import { Mutation } from "react-apollo";
import { gql } from "apollo-boost";
const CREATE_USER_MUTATION = gql`
mutation CREATE_USER_MUTATION(
$name: String!
$email: String!
$password: String!
) {
signup(name: $name, email: $email, password: $password) {
id
name
email
password
permissions
}
}
`;
class App extends Component {
state = …我正在使用postsConnection无限滚动查询。它包含诸如 之类的变量after。进行赞成突变后，我想refetchQueries......像这样
const upvote = await client.mutate({
mutation: UPVOTE_MUTATION,
variables: {
postId: this.props.post.id
},
refetchQueries: [
{ query: POST_AUTHOR_QUERY }
]
})
上面的代码给出错误，因为POST_AUTHOR_QUERY接受很少的变量。这是该查询
export const POST_AUTHOR_QUERY = gql`
query POST_AUTHOR_QUERY($authorUsername: String! $orderBy: PostOrderByInput $after: String){
postsAuthorConnection(authorUsername: $authorUsername orderBy: $orderBy after: $after) {
....
}
}
我不想手动添加变量。变量已经存储在缓存中。使用时如何重复使用它们refetchQueries？？？
以下是我读过的有关此问题的一些资源
我正在尝试改变一个突变。突变确实存在并且在我的 graphql 操场上运行良好。但是当我在我的反应组件中实现它时，我得到了错误。查询工作正常。顺便说一句，我的代码中需要客户端，所以我绝对必须使用 ApolloConsumer。
我尝试使用 client.mutate 像https://github.com/apollographql/apollo-client/issues/2762
export const LOGIN = gql`
mutation LOGIN($email: String!, $password: String!) {
login(email: $email, password: $password) {
email
}
}
`;
class LoginComponent extends Component{
render(){
return(
<ApolloConsumer>
{client=>{
return(
<Button onClick={()=>{
client
.mutate({
mutation: LOGIN,
variables: {
email: "test@test.com",
password: "test"
}
})
.then(result => {
console.log('result', result)
})
.catch(err => {
console.log("err", err);
alert(err.toString());
});
}}>
OK
</Button>
)
}}
</ApolloConsumer>
)
}
}
我希望获得成功，但我收到错误：GraphQL 错误：无法在类型“突变”上查询字段“登录”。（第 2 行，第 3 列）：登录（电子邮件：$email，密码：$password）{ ^
我想获取动态类型的数据。为此，我在 graphql 查询中使用片段。Api 在 graphql Playground 中工作正常，但是当我尝试将它与 React-apollo 客户端集成时，它也给了我一个空对象以及警告！控制台中正在进行的启发式片段匹配。
当我使用 npm install 和 npm run start 时它也可以工作，但是当我切换到yarn install 和yarn run start 时它给了我一个错误。
我使用 IntrospectionFragmentMatcher 并将 fetchPolicy 设置为“缓存和策略”。
我还共享了用于客户端配置的 IntrospectionFragmentMatcher 的代码。
query GetContentSections($contentPageId: Int) {
contentSection {
searchContentSections(contentPageId: $contentPageId, status: [ACTIVE]) {
id
contentLayoutId
sort
sectionContainers {
id
sort
snippets {
id
sort
type: __typename
...quote
...text
...image
...video
...audio
...button
...popup
...map
...code
...app
}
}
}
}
}
fragment text on ContentSnippetTextType{
text
}
fragment image on ContentSnippetImageType{
assetId …我正在尝试在 React js 中向 apollo 客户端添加授权令牌以让用户登录...
\n索引.js
\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter as Router } from 'react-router-dom';\nimport { ThemeProvider } from 'react-jss';\nimport Theme from 'resources/theme';\nimport Routes from 'routes';\nimport './index.css';\nimport * as serviceWorker from './serviceWorker';\nimport { Auth0Provider } from "@auth0/auth0-react";\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport ReactNotification from 'react-notifications-component'\nimport './components/orders/fonts/NotoSansJP-Regular.otf'\nimport 'react-notifications-component/dist/theme.css'\nimport { ApolloProvider , ApolloClient, InMemoryCache } from '@apollo/client';\nimport { useAuth0 } from "@auth0/auth0-react";\n\n\nconst client = new ApolloClient({\nuri: process.env.REACT_APP_API_BACK ,\nheaders: {\n Authorization: `Bearer ${accessToken}` // doesn\xe2\x80\x99t work \n },\n cache: …使用以下 graphql：
scalar Date
type MyModel {
id: ID!
date: Date!
}
query MyModels {
myModels {
id
date
}
}
type Query {
myModel: [MyModel!]
}
和解析器：
import { DateTimeResolver } from 'graphql-scalars'
const resolvers = {
// Scalars
Date: DateTimeResolver,
myModels: async () => {
return await context.user.getMyModels()
}
}
我的查询返回date: "2021-02-07T06:58:51.009Z". 是否可以让 Apollo Client 将其转换为 Date 对象？