标签: apollo

在下面的（未经测试的）示例代码中，如果我想访问内部 Apollo GraphQL 客户端的实例actions/math.js，我必须将其从Calculator组件传递到事件处理程序，然后从WrappedCalculator事件处理程序传递到操作创建者。

这会导致大量代码膨胀。

actions/math.js对于操作创建者来说，访问 GraphQL 客户端实例的更好方式是什么？

示例代码：

常量/Queries.js：

const MUTATION_APPEND_TO_AUDIT_TRAIL = gql`
    mutation MutationAppendToAuditTrail($mathOperation: String!, $operand1: Float!, $operand2: Float!) {
        appendToAuditTrail(operation: $mathOperation, operand1: $operand1, operand2: $operand2) {
            id
            operation
            operand1
            operand2
        }
    }
`;

动作/math.js：

import { INCREMENT_TOTAL_BY, MULTIPLY_TOTAL_BY } from '../constants/ActionTypes';
import { getTotal } from '../reducers';

incrementResultBy = (operand, graphQlClient) => (dispatch, getState) {
    // Use selector to get the total prior to the operation.
    const total …

我有以下 GraphQL 订阅，运行良好：

subscription voucherSent($estId: Int!) {
  voucherSent(estId: $estId) {
    id
    name
    usedAt
    sentAt
  }
}

但以下发送“无法读取未定义的属性‘用户’”错误

subscription voucherSent($estId: Int!) {
  voucherSent(estId: $estId) {
    id
    name
    usedAt
    sentAt
    owner {
      id
      username
    }
  }
}

Apollo GraphQL 订阅是否处理嵌套查询？

这是我的解析器代码：

return models.Voucher.update({
    sentAt: moment().format(),
    usedIn: args.sentTo,
  }, { where: { id: args.id } })
    .then(resp => (
      models.Voucher.findOne({ where: { id: args.id } })
        .then((voucher) => {
          pubsub.publish(VOUCHER_SENT, { voucherSent: voucher, estId: voucher.usedIn });
          return resp;
        })
    ))

我正在测试使用 Apollo 和 graphql 的角度服务，我收到No provider for HttpClient! 即使我将 HttpClientTestingModule 添加到导入中也会出错。

规则.规范.ts

import { PlatformGraphQLService } from 'platform-graphql'
import { TestBed, ComponentFixture } from '@angular/core/testing'
import { RulesService } from './rules.service'
import {
  ApolloTestingModule,
  ApolloTestingController
} from 'apollo-angular/testing'
import { async } from '@angular/core/testing'
import { HttpClientTestingModule } from '@angular/common/http/testing'
import { Apollo, ApolloModule } from 'apollo-angular'

describe('RulesService', () => {
  let controller: ApolloTestingController
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        ApolloTestingModule,
        HttpClientTestingModule,
      ],
      providers: [
        PlatformGraphQLService,
      ],
    })
    controller …

我在 GraphQL 模式中扩展查询时收到此错误。这是错误堆栈：

stack=[Error: Cannot extend type "Query" because it is not defined.,     at assertValidSDL (/NodeGraphQL/node_modules/graphql/validation/validate.js:108:11),     
at Object.buildASTSchema (/NodeGraphQL/node_modules/graphql/utilities/buildASTSchema.js:71:34),     
at Object.buildSchemaFromTypeDefinitions (/NodeGraphQL/node_modules/graphql-tools/dist/generate/buildSchemaFromTypeDefinitions.js:23:28),     
at Object.makeExecutableSchema (/NodeGraphQL/node_modules/graphql-tools/dist/makeExecutableSchema.js:26:29),     
at ApolloServer.initSchema (/NodeGraphQL/node_modules/apollo-server-core/dist/ApolloServer.js:272:49),     
at new ApolloServerBase (/NodeGraphQL/node_modules/apollo-server-core/dist/ApolloServer.js:202:30),     
at new ApolloServer (/NodeGraphQL/node_modules/apollo-server-express/dist/ApolloServer.js:59:9),     
at Object.<anonymous> (/NodeGraphQL/dist/server.js:17:16),     
at Module._compile (internal/modules/cjs/loader.js:689:30),     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10),     
at Module.load (internal/modules/cjs/loader.js:599:32),     at tryModuleLoad (internal/modules/cjs/loader.js:538:12),     
at Function.Module._load (internal/modules/cjs/loader.js:530:3),     at Function.Module.runMain (internal/modules/cjs/loader.js:742:12),     
at startup (internal/bootstrap/node.js:283:19),     at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)]

我的架构如下所示：

import { gql } from 'apollo-server-express';

export const ticket = gql`
  type Ticket {
    id: ID! …

我正在使用 apollo 客户端 v2.6 并使用 @apollo/react-hooks 与我的 graphql 查询和突变进行交互。我遇到的问题是在一个组件中进行多个 apollo 操作。我可以执行查询和突变，但检索问题所在的数据，因为从下面的代码来看

[getEvents, { data }] = useQuery(GET_EVENTS),
    [createEvent, { data }] = useMutation(CREATE_EVENT)

您注意到，为了从操作中获取数据，我必须使用 data 属性，但我得到的错误是

解析错误：标识符“data”已被声明

那么有没有另一种方法可以从操作中获取数据而无需使用数据两次 提前致谢

我正在使用以下方法检索 NextJS 中的查询参数： const qry_flightNumber = Number(router.query.flightNumber); 然后我想通过执行以下操作向我的 GraphQL 服务器发送请求： PAGE: LaunchDetails.js

import React, { useEffect, useState } from "react";
import classNames from "classnames";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import PropTypes from "prop-types";

const LAUNCH_QUERY = gql`
  query LaunchQuery($flight_number: Int!) {
    launch(flight_number: $flight_number) {
      flight_number
      mission_name
      launch_year
      launch_success
      launch_date_local
      rocket {
        rocket_id
        rocket_name
        rocket_type
      }
    }
  }
`;

export default function LaunchDetails({ flightNum }) {
  const { loading, error, data } = useQuery(LAUNCH_QUERY, {
    variables: …

我的数据库中有一个表“学生”（带有 Hasura 的 postgress），与“主题”具有多对多关系：

type Student = {
    id: uuid
    name: String
    subjects: [subject]
}

type Subject = {
    id: uuid
    name: String
}

我有一个静态 QUERY1：

query FilteredStudents($subjects: [String!]) {
    students(where: { subjects: { name: { _in: $subjects } } }) {
        id
        name
    }
}

例如：

$subjects = ['Math', 'English', 'Physics']

它将找到参加任何这些课程的所有学生。例如：

const student1 = {
   id: 1,
   name: 'Mike',
   subjects: ['Physics', 'Chemistry']  // subjects mapped to names for simplicity
}

我的问题是我想要另一个查询，它将找到参加这些课程的所有学生。

所以它不应该获取Student1 …

我的 Next JS 网站运行良好，有一天当我尝试从这里安装 Apollo Rest https://www.apollographql.com/docs/link/links/rest/#gatsby-focus-wrapper我开始遇到很多错误. 我放弃了packages.json 中的任何更改，删除了packages-lock.json、node_modules 和dust 文件和文件夹。但不断收到下一个错误：

GraphQL error occurred [getDataFromTree] TypeError: Cannot read property 'indexOf' of undefined
    at addBasePath (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2966:15)
    at F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2464:40
    at Link.formatUrls (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2388:18)
    at Link.render (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2588:14)
    at processChild (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3134:18)
    at resolve (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
    at renderToStaticMarkup (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:4004:27)
    at process (F:\Projects\breadcrumps\showcase\node_modules\@apollo\react-ssr\lib\react-ssr.cjs.js:38:16)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
TypeError: Cannot read property 'indexOf' of undefined
    at addBasePath (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2966:15)
    at F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2464:40
    at Link.formatUrls (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2388:18)
    at Link.render (F:\Projects\breadcrumps\showcase\dist\functions\next\server\static\development\pages\index.js:2588:14)
    at processChild (F:\Projects\breadcrumps\showcase\node_modules\react-dom\cjs\react-dom-server.node.development.js:3134:18)
    at …

正如我们所知，当 props 或 state 发生变化时，react 组件会重新渲染。

我现在正在使用useQuery从react-apollo包象下面这样：

import { gql, useQuery } from '@apollo/client';

const getBookQuery = gql`
  {
    books {
      name
    }
  }
`;

function BookList() {
    const { loading, error, data} = useQuery(getBookQuery);

    if(loading) return <p>Loading....</p>
    if(error) return <p>Ops! Something went wrong</p>

    return (
      <>
        <ul>
          {data.books.map(book => (
            <li key={book.name}>{book.name}</li>
          ))}
        </ul>
      </>
    )
}

export default BookList;

当我运行上面的代码时，我们首先进入Loading...DOM，然后将其更新为包含查询数据的列表（一旦它到达）。但是一旦从查询中收到数据，react 如何知道重新渲染我的组件。

这些data,loading和error属性是否映射到组件 props 并且它们正在更新？如果是这样，为什么 chrome 开发工具不显示此 …

我正在尝试在评论部分实现分页。

我在网站上有正常的视觉行为。当我单击“获取更多”按钮时，会添加 10 条新评论。

我的问题是请求每次执行两次。我不知道为什么。第一次，它使用游标值执行，第二次没有它。似乎在每次 fetchMore 之后都会执行 useQuery 钩子。

任何帮助，将不胜感激。谢谢！

成分 ：

export default ({ event }) => {
  const { data: moreCommentsData, fetchMore } = useQuery(getMoreCommentsQuery, {
    variables: {
      id: event.id,
    },
    fetchPolicy: "cache-and-network",
  });
  const getMoreComments = () => {
    const cursor =
      moreCommentsData.event.comments[
        moreCommentsData.event.comments.length - 1
      ];
    fetchMore({
      variables: {
        id: event.id,
        cursor: cursor.id,
      },
     updateQuery: (prev, { fetchMoreResult, ...rest }) => {
        return {
          ...fetchMoreResult,
          event: {
            ...fetchMoreResult.event,
            comments: [
              ...prev.event.comments,
              ...fetchMoreResult.event.comments,
            ],
            commentCount: fetchMoreResult.event.commentCount,
         }, …