标签: apollo

为什么我收到错误:无法在"查询"类型上查询字段xx?

虽然我在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)

apollo reactjs graphql apollo-client

12
推荐指数
3
解决办法
8786
查看次数

包 apollo-link-http 中的 new HttpLink 和 createHttpLink 之间的差异

在教程中

https://www.howtographql.com/vue-apollo/1-getting-started/

有提供的new HttpLink语法,但在官方文档中

https://www.apollographql.com/docs/link/links/http/

函数createHttpLink被应用。

这两个来源都没有描述这些方法之间的差异。

apollo graphql-js apollo-client

12
推荐指数
1
解决办法
3008
查看次数

GraphQL - 如何使用不同的状态代码进行响应?

我在使用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)

有谁能够帮我?

javascript apollo graphql react-apollo

11
推荐指数
2
解决办法
9380
查看次数

如何使用Apollo Client + React Router根据用户状态实现私有路由和重定向?

我使用React Router 4进行路由,使用Apollo Client进行数据获取和缓存.我需要根据以下标准实施PrivateRoute和重定向解决方案:

  1. 允许用户查看的页面基于用户状态,可以从服务器获取,也可以从缓存中读取.用户状态本质上是一组标志,用于了解用户在我们的渠道中的位置.例如国旗:isLoggedIn,isOnboarded,isWaitlisted等.

  2. 如果用户的状态不允许他们在该页面上,则甚至不应该开始呈现页面.例如,如果不是isWaitlisted,则不应该看到等待列表页面.当用户意外地发现自己在这些页面上时,应将其重定向到适合其状态的页面.

  3. 重定向也应该是动态的.例如,假设您在尝试之前查看用户个人资料isLoggedIn.然后我们需要将您重定向到登录页面.但是,如果您isLoggedIn不是isOnboarded,我们仍然不希望您看到您的个人资料.因此,我们希望将您重定向到新手入门页面.

  4. 所有这些都需要在路由级别上进行.页面本身应该不知道这些权限和重定向.

总之,我们需要一个给出用户状态数据的库,可以

  • 计算用户是否可以在特定页面上
  • 计算需要动态重定向的位置
  • 在渲染任何页面之前执行这些
  • 在路线级别上执行这些操作

我已经在开发一个通用库,但它现在有它的缺点.我正在寻求关于如何解决这个问题的意见,以及是否有既定的模式来实现这一目标.

这是我目前的做法.这不起作用,因为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 reactjs react-router react-apollo apollo-client

11
推荐指数
1
解决办法
2793
查看次数

何时在Apollo-Angular中使用watchQuery或查询?

我在Apollo-Angular(graphql)中使用watchQuery或查询

watchQuery和查询的逻辑和区别是什么

apollo graphql apollo-client angular

11
推荐指数
1
解决办法
6007
查看次数

graphql的类型定义中的Date和Json

是否可以在我的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一样的错误......

任何的想法 ?

apollo graphql

11
推荐指数
2
解决办法
1万
查看次数

GraphQL动态查询构建

我有一个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).

我有以下约束:

  1. 修改服务器的架构不是一个选项(例如,我不能将ID数组传递给解析器)
  2. 我的查询是使用模板字符串指定的,例如gql` ...`
  3. 我不想手动将查询构建为字符串,因为这似乎是灾难的一个方法,并且意味着我失去了所有的工具优势(例如自动完成,语法突出显示,linting)

我正在使用的堆栈是:

  • 阿波罗客户端(特别是阿波罗角)
  • 打字稿
  • graphql-tag(用于定义查询)

理想情况下,我想要做的是有一些方法将两个查询合并为一个,这样我就可以按照第一个例子定义它们,然后将它们连接在一个抽象层中,这样我得到一个像第二个例子一样的查询通过电汇发送.

但是我不确定如何实现这一点,因为graphql-tag正在将查询解析为AST,而我正在努力理解以这种方式操作查询是否可行.

有哪些技术可以生成像这样的动态查询,其中查询的形状不是预先知道的?

apollo graphql apollo-client graphql-tag

11
推荐指数
3
解决办法
5249
查看次数

下一个js和Apollo-Cookie未通过

我正在将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)

javascript apollo reactjs graphql next.js

11
推荐指数
1
解决办法
638
查看次数

是否可以使用 Apollo 的 MockedProvider 在故事书中进行动态模拟?

在我的 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)

apollo graphql storybook

11
推荐指数
1
解决办法
708
查看次数

Apollo 客户端在 next.js、javascript、graphql、react js 中出现问题

如果我首先访问主页或刷新主页,我无法在解析器中获取配置文件,因为 cache.readQuery 不起作用。

以及它无限地调用api。

如果我移动到另一个页面并再次回到主页,cache.readQuery 工作并正确获取帖子的个人资料和投票状态。

有没有人遇到过这个问题?home.tsx 是我项目的主页。

此外, useQuery(@apollo/react-hooks) 获取每个页面上的旧数据。

如果您有经验,请帮助我。

  • 主页.tsx
    ...
    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)

javascript caching apollo reactjs graphql

11
推荐指数
1
解决办法
817
查看次数