标签: apollo

我有一个查询,它给我一个笔记列表和一个订阅,它通过改变查询来监听和插入新笔记.但问题是第一个注释没有添加.

所以让我添加更多细节,最初是一个包含一个名为notes的属性的对象的查询响应,如果我们尝试添加一个注释,该属性将被删除.注释是创建的,所以如果我刷新我的应用程序,查询将返回注释然后如果我尝试再次添加注释,注释将添加到查询对象中的数组.

这是我的笔记容器,我查询笔记并创建一个新属性来订阅更多笔记.

export const NotesDataContainer = component => graphql(NotesQuery,{

name: 'notes',
props: props => {

  console.log(props); // props.notes.notes is undefined on first note added when none exists.

  return {
    ...props,
    subscribeToNewNotes: () => {

      return props.notes.subscribeToMore({
        document: NotesAddedSubscription,
        updateQuery: (prevRes, { subscriptionData }) => {

          if (!subscriptionData.data.noteAdded) return prevRes;

          return update(prevRes, {
            notes: { $unshift: [subscriptionData.data.noteAdded] }
          });

        },
      })
    }
  }
}

})(component);

任何帮助都会很棒,谢谢.

编辑:

export const NotesQuery = gql`
  query NotesQuery {
    notes {
      _id
      title
      desc …

loadingreact-apollo客户端是否有可用的全局标志？我有一个"页面包装器"组件,我想在所有子组件都收到他们的数据之后应用ui效果.

我已经使用redux设置了apollo,因此可以随时访问商店(http://dev.apollodata.com/react/redux.html)

我可以很容易地dispatch说明从apollo接收数据的每个组件的更改,但是我希望这个page wrapper组件不知道它的子节点或它们的查询.

我已经调查了使用withApollo- http://dev.apollodata.com/react/higher-order-components.html#withApollo - 但是没有看到全局的api is loading.

最近开始使用graphQL和Apollo - apollo-client.

我在graphQL之上构建了一个Web服务,它运行得很好.我面临的唯一问题是项目的客户端.例如(请参阅下面的代码),在运行createVideo()之后data,我的组件的属性是一个可观察的,它正在观察查询没有自动刷新,并且在回调上手动调用apollo.query似乎没有任何效果,因为查询返回缓存的结果,而不是服务器的结果.

我错过了什么吗？

app.component.ts
  import {Component, OnInit} from '@angular/core';
  import {Apollo, ApolloQueryObservable} from 'apollo-angular';
  import 'rxjs/Rx';
  import gql from 'graphql-tag';

  // http://dev.apollodata.com/angular2/mutations.html
  const NewVideoQuery = gql`
    mutation AddVideoQuery($title: String!,$duration: Int!, $watched: Boolean!){
      createVideo(video: { title: $title, duration: $duration, watched: $watched } ){
        id,
        title
      }
    }
  `;
  const VideoQuery = gql`
      {
          videos {
              id,
              title
          }
      }
  `;
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    data: ApolloQueryObservable<any>;
    video: …

最近，Apollo Client发布了一个websocket订阅功能，但到目前为止，我仅在componentWillMount生命周期挂钩内通过使用subscriptionToMore启动查询来看到它。

这是取自https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-client-side-40e185e4be76#0a8f的示例

const messagesSubscription = gql`
  subscription messageAdded($channelId: ID!) {
    messageAdded(channelId: $channelId) {
      id
      text
    }
  }
`

componentWillMount() {
  this.props.data.subscribeToMore({
    document: messagesSubscription,
    variables: {
      channelId: this.props.match.params.channelId,
    },
    updateQuery: (prev, {subscriptionData}) => {
      if (!subscriptionData.data) {
        return prev;
      }
      const newMessage = subscriptionData.data.messageAdded;
      // don't double add the message
      if (!prev.channel.messages.find((msg) => msg.id === newMessage.id)) {
        return Object.assign({}, prev, {
          channel: Object.assign({}, prev.channel, {
            messages: [...prev.channel.messages, newMessage],
          })
        });
      } else {
        return prev;
      }
    }
  }); …

我正在查询同一组件中需要的2个对象.问题是其中一个查询必须等待另一个查询并将其id字段用作另一个查询的参数.不知道如何实现这一点.

const PlayerQuery = gql`query PlayerQuery($trackId: Int!, $duration: Int!, $language: String!) {
  subtitle(trackId: $trackId, duration: $duration) {
    id,
    lines {
      text
      time
    }
  }
  translation(trackId: $trackId, language: $language, subtitleId: ???) {
    lines {
      translation
      original
    }
  }
}`;

因此在上面的查询中translation需要subtitleId作为subtitle查询返回的参数.
我在客户端和服务器上都使用Apollo.

我在前端使用react-apollo,在后端使用graphcool.我有一个突变,创建一个这样的教程:

const CREATE_TUTORIAL_MUTATION = gql`
  mutation CreateTutorialMutation(
    $author: String
    $link: String
    $title: String!
    $postedById: ID!
    $completed: Boolean!
  ) {
    createTutorial(
      author: $author
      link: $link
      title: $title
      postedById: $postedById
      completed: $completed
    ) {
      author
      link
      title
      postedBy {
        id
        name
      }
      completed
    }
  }
`

它在提交处理程序中调用,如此...

this.props.createTutorialMutation({
      variables: {
        author,
        link,
        title,
        completed: false,
        postedById
      }
    })

一切都很美妙.

现在我想在创建新教程时添加一组标记.我创建了输入字段并将其连接起来,以便tags变量是一个对象数组,每个对象都有一个标记id和标记文本.

如果我尝试将标记字段添加到变异中,则需要标量类型.但是对于一组对象似乎没有标量类型.

如果我在调用变异时将tag变量作为参数传递,我如何填充变异中的Scalar类型字段(在148行上这里https://github.com/joshpitzalis/path/blob/graphQL/src/ components/Add.js)和架构？

我是graphQL的新手,我明白我可能会以错误的方式接近这一点.如果是这种情况,我如何在graphQL中添加一个对象数组？

我正在尝试使用TransferState我的Angular Universal v5应用程序.经过大量的调试后,我意识到,在服务器上,TransferState似乎正在工作,因为响应包含一个<script id=APP_ID></script>包含相应序列化状态(TransferState源)的标记.

出于某种原因,浏览器应用程序尚未使用状态进行初始化.如果我将测试状态硬编码到我的应用程序index.html文件中(通过复制和粘贴),那么我的浏览器应用程序已成功初始化为浏览器状态.我不确定出了什么问题.任何想法非常感谢!

我唯一的猜测是,当我在Chrome的检查器中观看我的应用程序加载时,看起来好像大多数元素一次加载,然后在另一个时间点<script id=APP_ID></script>显示.这似乎暗示脚本标签是以某种方式在浏览器端生成/处理的,即使我已经检查了服务器的响应并且它包含脚本标记.但是,如果脚本标记在客户端进行某种处理,则可能TransferState在处理完成之前进行初始化,这就是我的应用程序未接收状态的原因.再次,任何想法都非常感谢!

这是相关代码:

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    
import { AppRoutingModule } from './app-routing.module';
import { GraphQLModule } from './graphql.module';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'service-work-coordination' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    GraphQLModule,
  ], …

根据这些阿波罗文档,设置一个error-policy的all应使errors一个GraphQL响应提供给阵列我的阿波罗包裹阵营部件"所以(我的)UI可以使用它们." 我的应用程序是通用的,因此我使用此策略非常重要,因此错误不会阻止应用程序完全呈现.

问题是,即使我的浏览器开发工具errors在服务器响应中显示数组,我也无法在我的React组件的道具中访问它.同样,props.data.error总是未定义.为什么是这样？

// Component
import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const Cart = (props) => {
  console.log(props.errors); // undefined
  console.log(props.data.error); // undefined
  console.log(props.data.cart); // null

  return <div>Foo.</div>;
};

export default graphql(gql`
  query CartQuery {
    cart {
      products {
        _id,
        name
      }
    }
  }
`, { options: { errorPolicy: 'all' } })(Cart);


// Resolver
cart: (root, args, context) => { …

我有一个带有消息列表的线程，该消息列表是通过GET_THREAD_MESSAGES查询获取的。该查询是分页的，具体取决于用户是否之前看到该线程，可能会加载第一页，最后一页或仅加载新消息。（即first/after/before/last可以使用任何值传递）

thread(id: "asdf") {
  messageConnection(after: $after, first: $first, before: $before, last: $last) {
    edges {
      cursor
      node { ...messageInfo }
    }
  }
}

现在我有一个sendMessage突变，我称之为，然后在该update突变的方法中，我想乐观地将发送的消息添加到线程消息中，以获得更好的UX。没有分页，我知道我会这样做：

const data = store.readQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId }
})

data.messageConnection.edges.push(newMessageEdge);

store.writeQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId },
  data,
})

不幸的是，由于我知道有分页，因此该store.readQuery调用会引发一个错误，提示“它找不到该messageConnection线程的字段”，因为该字段现在类似于messageConnection({ after: 'jfds1223asdhfl', first: 50, before: null, last: null })。在阿波罗文档说，你应该用@connection指令的查询工作，解决这一问题。我试图将查询更新为如下所示：

thread(id: "asdf") {
  messageConnection(...) @connection(key: …

我有一个与阿波罗客户端的应用程序。当用户登录时，我可以查询客户端状态并检索用户，但是，当我刷新页面时，不再设置用户数据。

如您所见，我在我的index.js文件中设置了客户端，然后将其传递给ApolloProvider包装了整个应用程序的文件。

// index.js

const client = () => {
  const cache = new InMemoryCache()

  persistCache({
    cache,
    storage: window.localStorage
  })

  return new ApolloClient({
    uri: graphQLUri,
    credentials: 'include',
    clientState: {
      defaults: {
        locale: "en-GB",
        user: {
          __typename: "User",
          isLoggedIn: false,
          username: "",
          salesChannel: "",
          fullName: ""
        }
      },
      typeDefs: `
        enum Locale {
          en-GB
          fr-FR
          nl-NL
        }
        type Query {
          locale: Locale
        }
      `
    },
    cache
  })
}

ReactDOM.render(
  <ApolloProvider client={client()}>
      <App />
  </ApolloProvider>,
  document.getElementById("root") …