虽然我在GraphiQL上成功测试了GraphiQL工具后复制并粘贴了graphQL查询,但当我在reactJS应用程序中的Apollo客户端中尝试时,查询返回错误:
[GraphQL error]: Message: Cannot query field "allStudents" on type "Query"., Location: [object Object], Path: undefined
Run Code Online (Sandbox Code Playgroud)
这是我的实现:
const link = createHttpLink({
uri: 'http://localhost:8000/graphql',
fetchOptions: { method: "POST" }
});
const client = new ApolloClient({
link: link
});
const GET_STUDENTS = gql`
query getStudents($schoolID: Int!){
allStudents(schoolId: $schoolID){
pickUpLat
pickUpLng
}
}
`;
client
.query({
query: GET_STUDENTS,
variables: { schoolID: 1 }
})
.then(result => console.log(result));
Run Code Online (Sandbox Code Playgroud)
可能有什么不对?这是我预期的正确答案:
{
"data": {
"allStudents": [
{
"pickUpLat": 31.9752942479727,
"pickUpLng": 35.8438429235775
},
{
"pickUpLat": 31.9754545979993,
"pickUpLng": …
Run Code Online (Sandbox Code Playgroud) 在教程中
有提供的new HttpLink
语法,但在官方文档中
函数createHttpLink
被应用。
这两个来源都没有描述这些方法之间的差异。
我在使用Graphql和Apollo Client时遇到了麻烦.
当我使用REST时,我总是创建不同的响应,如401代码,但在这里我不知道如何做类似的行为.
当我得到响应时,我希望它转到catch函数.我在前面有这个代码:
client.query({
query: gql`
query TodoApp {
todos {
id
text
completed
}
}
`,
})
.then(data => console.log(data))
.catch(error => console.error(error));
Run Code Online (Sandbox Code Playgroud)
有谁能够帮我?
我使用React Router 4进行路由,使用Apollo Client进行数据获取和缓存.我需要根据以下标准实施PrivateRoute和重定向解决方案:
允许用户查看的页面基于用户状态,可以从服务器获取,也可以从缓存中读取.用户状态本质上是一组标志,用于了解用户在我们的渠道中的位置.例如国旗:isLoggedIn
,isOnboarded
,isWaitlisted
等.
如果用户的状态不允许他们在该页面上,则甚至不应该开始呈现页面.例如,如果不是isWaitlisted
,则不应该看到等待列表页面.当用户意外地发现自己在这些页面上时,应将其重定向到适合其状态的页面.
重定向也应该是动态的.例如,假设您在尝试之前查看用户个人资料isLoggedIn
.然后我们需要将您重定向到登录页面.但是,如果您isLoggedIn
不是isOnboarded
,我们仍然不希望您看到您的个人资料.因此,我们希望将您重定向到新手入门页面.
所有这些都需要在路由级别上进行.页面本身应该不知道这些权限和重定向.
总之,我们需要一个给出用户状态数据的库,可以
我已经在开发一个通用库,但它现在有它的缺点.我正在寻求关于如何解决这个问题的意见,以及是否有既定的模式来实现这一目标.
这是我目前的做法.这不起作用,因为getRedirectPath
需要的数据在OnboardingPage component
.
此外,我不能将PrivateRoute与可以注入计算重定向路径所需的道具的HOC包装起来,因为这不会让我将它用作Switch React Router组件的子节点,因为它不再是Route.
<PrivateRoute
exact
path="/onboarding"
isRender={(props) => {
return props.userStatus.isLoggedIn && props.userStatus.isWaitlistApproved;
}}
getRedirectPath={(props) => {
if (!props.userStatus.isLoggedIn) return '/login';
if (!props.userStatus.isWaitlistApproved) return '/waitlist';
}}
component={OnboardingPage}
/>
Run Code Online (Sandbox Code Playgroud) 我在Apollo-Angular(graphql)中使用watchQuery或查询
watchQuery和查询的逻辑和区别是什么
是否可以在我的graphql架构中将字段定义为Date或JSON?
type Individual {
id: Int
name: String
birthDate: Date
token: JSON
}
Run Code Online (Sandbox Code Playgroud)
实际上服务器正在给我一个错误说:
Type "Date" not found in document.
at ASTDefinitionBuilder._resolveType (****node_modules\graphql\utilities\buildASTSchema.js:134:11)
Run Code Online (Sandbox Code Playgroud)
和JSON一样的错误......
任何的想法 ?
我有一个GraphQL服务器,它能够为指定的源(例如,传感器数据)提供时间序列数据.获取传感器数据的示例查询可能是:
query fetchData {
timeseriesData(sourceId: "source1") {
data {
time
value
}
}
}
Run Code Online (Sandbox Code Playgroud)
在我的前端,我希望允许用户选择一个或多个源,并显示一个图表,每个图表都有一行.看起来这可以通过使用这样的查询:
query fetchData {
series1: timeseriesData(sourceId: "source1") {
data {
time
value
}
}
series2: timeseriesData(sourceId: "source2") {
data {
time
value
}
}
}
Run Code Online (Sandbox Code Playgroud)
大多数GraphQL教程似乎都专注于静态查询(例如,唯一改变的是变量,而不是请求的实际形状) - 但在我的情况下,我需要查询本身是动态的(每个都有一个timeseriesData请求)我选择的ids).
我有以下约束:
我正在使用的堆栈是:
理想情况下,我想要做的是有一些方法将两个查询合并为一个,这样我就可以按照第一个例子定义它们,然后将它们连接在一个抽象层中,这样我得到一个像第二个例子一样的查询通过电汇发送.
但是我不确定如何实现这一点,因为graphql-tag正在将查询解析为AST,而我正在努力理解以这种方式操作查询是否可行.
有哪些技术可以生成像这样的动态查询,其中查询的形状不是预先知道的?
我正在将Next JS与Apollo结合使用,并在with-data HOC中使用以下配置对其进行了设置:
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { withClientState } from 'apollo-link-state';
import { getMainDefinition } from 'apollo-utilities';
import { ApolloLink, Observable, split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import withApollo from 'next-with-apollo';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { endpoint, prodEndpoint, WSendpoint, WSprodEndpoint } from '../config';
import defaults from '../apollo-state/graphql/default-state';
import Mutation from '../apollo-state/resolvers/mutation-resolvers'; …
Run Code Online (Sandbox Code Playgroud) 在我的 React 故事书中,我希望能够使用使用 graphQL 查询和突变(用 Apollo 实现)的组件。
使用 MockedProvider 可以很好地工作,只要我提前指定确切的突变,包括它们的输入。
我想知道是否有可能/如何不提前指定输入,以接受任何输入。
export const MyComponent = () => (
<Mutation mutation={gql`some mutation`}>
{(doMutation, { loading, error, data }) => (
<Button onClick={()=> doMutation({input: {
someInput: Math.rand()*10 // Would be fine if this was 1.
}}) />
{data ? <>Result: {data.someResult}</> : null}
)
</Mutation>
)
Run Code Online (Sandbox Code Playgroud)
storiesOf('MyComponent', module)
.add('some story', () => (
<StaticRouter context={{}}>
<MockedProvider
mocks={[
{
request: {
query: gql`some query...`,
variables: { input: { someInput: '1' } },
}, …
Run Code Online (Sandbox Code Playgroud) 如果我首先访问主页或刷新主页,我无法在解析器中获取配置文件,因为 cache.readQuery 不起作用。
以及它无限地调用api。
如果我移动到另一个页面并再次回到主页,cache.readQuery 工作并正确获取帖子的个人资料和投票状态。
有没有人遇到过这个问题?home.tsx 是我项目的主页。
此外, useQuery(@apollo/react-hooks) 获取每个页面上的旧数据。
如果您有经验,请帮助我。
...
const GET_POSTS = graphql`
query posts($accountname: String!, $page: Int, $pathBuilder: any, $postsStatus: String) {
posts(accountname: $accountname, page: $page, postsStatus: $postsStatus)
@rest(type: "Post", pathBuilder: $pathBuilder) {
post_id
author
voteStatus(accountname: $accountname) @client
created_at
}
}
`;
interface Props {
author: string;
}
const Home: NextPage<Props> = ({ author }) => {
const { data, fetchMore, loading } = useQuery(GET_POSTS, {
variables: {
accountname: author,
page: 1,
postsStatus: 'home', …
Run Code Online (Sandbox Code Playgroud) apollo ×10
graphql ×8
reactjs ×4
javascript ×3
react-apollo ×2
angular ×1
caching ×1
graphql-js ×1
graphql-tag ×1
next.js ×1
react-router ×1
storybook ×1