标签: apollo

当我在客户端上调用变异时,我收到以下警告:

writeToStore.js:111 {}中缺少字段updateLocale

这是我的stateLink:

const stateLink = withClientState({
  cache,
  resolvers: {
    Mutation: {
      updateLocale: (root, { locale }, context) => {
        context.cache.writeData({
          data: {
            language: {
              __typename: 'Language',
              locale,
            },
          },
        });
      },
    },
  },
  defaults: {
    language: {
      __typename: 'Language',
      locale: 'nl',
    },
  },
});

这是我的组成部分:

export default graphql(gql`
  mutation updateLocale($locale: String) {
    updateLocale(locale: $locale) @client
  }
`, {
    props: ({ mutate }) => ({
      updateLocale: locale => mutate({
        variables: { locale },
      }),
    }),
  })(LanguagePicker);

我错过了什么？

我需要在GraphQL Apollo Node.js服务器上处理"用户现在在线"和"用户现在离线"的事件.最好的方法是什么？

我的调查:我非常确定我不需要实现任何心跳逻辑,因为订阅正在处理WebSockets.但是我没有在他们的文档中找到任何关于如何处理WebSockets事件的信息,例如"连接"和"断开连接"...实际上我可以从实际订阅的外部处理这些事件:

SubscriptionServer.create({
    execute,
    subscribe,
    schema,
    onConnect = (...args) => {
        console.log('User connected')
    },
    onDisconnect = (...args) => {
        console.log('User disconnected')
    }
}, {
    server: ws,
    path: '/subscriptions'
})

但无法确定通过此套接字连接的用户.

我的实现:现在我让它像那样工作:

1. 我们为所有调用表达了中间件,它将用户对象从jsonwebtoken推送到req对象.在这里,我可以触发"用户现在在线"的逻辑.

2. 我已经创建了单独的订阅,客户端在登录时订阅它并在注销时取消订阅.由于没有取消订阅处理程序,我设法确定在没有有效负载的情况下在用户断开连接时调用过滤器函数,所以我采用了这种方法:

   userOnlineSubscription: {
       subscribe: withFilter(
           () => pubSub.asyncIterator('userOnlineSubscription'),
               async (payload, variables) => {
                   if (!payload) {
                       // set user offline
               }
               return false
           }
       )
   }
   

   Run Code Online (Sandbox Code Playgroud)

至于我,上面的解决方案是丑陋的.有人可以推荐更好的方法吗？

我试图找出如何使用apollo-link-http与apollo-upload-client.

两者都创建一个终止链接,但我怎么能一起使用这两个？在我的index.js中我喜欢这个,但它不会工作因为两个链接都终止=>

const uploadLink = createUploadLink({ uri: process.env.REACT_APP_GRAPHQL_URL });

const httpLink = new HttpLink({ uri: process.env.REACT_APP_GRAPHQL_URL });

const client = new ApolloClient({
    link: ApolloLink.from([ authLink, logoutLink, stateLink, uploadLink, httpLink ]),
    cache,
});

有帮助吗？我对Apollo/Graphql没什么经验,但我想使用文件上传组件.

所以我试图在Next.js应用程序的客户端上拼接多个远程GraphCMS端点,在尝试/组合互联网上的每个示例之后,我已经把它带到了一个值得询问的地方.我的错误:

TypeError: this.getClient(...).watchQuery is not a function at GraphQL.createQuery

github repo在这里,你可以在上下文中看到这个initApollo.js:

import { ApolloClient } from 'apollo-client'
import {
  makeRemoteExecutableSchema,
  mergeSchemas,
  introspectSchema
} from 'graphql-tools'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import fetch from 'node-fetch'
import { Observable, ApolloLink } from 'apollo-link'
import { graphql, print } from 'graphql'
import { createApolloFetch } from 'apollo-fetch'

let apolloClient = null

if (!process.browser) {
  global.fetch = fetch
}

const PRIMARY_API = 'https://api.graphcms.com/simple/v1/cjfipt3m23x9i0190pgetwf8c'
const SECONDARY_API = …

有什么理由来IntrospectionFragmentMatcher确定从接口和联合字段返回的值的具体类型吗？

我在说apollo-client。我InMemoryCache与一起使用addTypename: true，因此客户端获得响应时就知道类型。

同时，我的控制台受到以下警告的困扰：

我看到文档提示的唯一原因是响应验证。但是，为什么要完全验证服务器发送的响应呢？如果服务器不值得信任，则无论如何验证都是无用的。

我在Android上对我的API进行获取请求时遇到了一个奇怪的问题(使用React Apollo).在dev构建以及发布构建中,fetch不起作用.一旦启动React Native Debugger并启用Enable Network Inspect,请求就会起作用.

我不知道如何调试请求,因为未启用Network Inspect时调试器中未显示这些请求.

我有什么想法可以找到错误或者是否有人遇到过同样的问题？

我有一个 Apollo Angular 客户端应用程序。我写信给商店：

const userQuery = this.userGql.document;
this.apollo.getClient().writeQuery({
  query: userQuery,
  data: { user: result.data.login.user },
});

这有效。然后我从缓存中检索用户并显示数据：

this.user = this.apollo.getClient().readQuery({
  query: this.userGql.document,
}).user;

这也有效。但是，我在 Google Chrome Devtools 中的缓存一直是这样的：

为什么这是空的？我想查看我的缓存状态调试。此外，当我转到 GraphiQL 选项卡并选择从缓存中获取时，它会查询 API（我可以判断，因为我没有传递令牌并且它拒绝了未经身份验证的错误的请求）。

编辑，我确实设置connectToDevTools为 true 以防万一：

export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({ uri }),
    cache: new InMemoryCache({
      dataIdFromObject: object => {
        switch (object.__typename) {
          case 'user':
            return object['username'];
        }
      },
    }),
    connectToDevTools: true,
  };
}

我想联合服务，但为了简单起见，让联合网关也拥有自己的模式和逻辑，可以代理 REST API 端点。现在看起来我需要分别拥有联合网关服务、联合 graphql 服务和其余 <->graphql 桥接服务。无论如何，在我们的例子中，rest-graphql 网关至少暂时可以位于联邦网关中，以避免不必要的引导和维护。

看起来阿波罗联邦网关localServiceList似乎正是为了这个目的。一个示例配置：

const gateway = new ApolloGateway({
    serviceList: [
        { name: "some-service", url: "http://localhost:40001/graph" }
    ],
    localServiceList: [
        { name: "rest-bridge", typeDefs }
    ]
});

但它并没有解决问题：如果有 localServiceList，它会跳过 serviceList。

所以问题是：这是否可以在阿波罗联盟网关中保存自己的模式和逻辑？

我正在使用Strapi和 Nuxt.js 来实现我的第一个 Headless CMS。我正在使用 Apollo 和 GraphQL。

我遇到了当前的错误，并且好几天都没能解决这个问题。

如果我写：

query Page($id: ID!) {
  page(id: $id) {
    id
    slug
    title
  }
}

并传递以下变量：

{
  "id" : "1"
}

我收到了正确的预期结果：

{
  "data": {
    "page": {
      "id": "1",
      "slug": "/",
      "title": "Homepage"
    }
  }
}

但是，我想不通过 ID 获取内容，而是通过我在 Strapi 中创建的名为“slug”的字段获取内容。环顾四周，似乎我应该能够执行以下操作：

query Page($slug: String!) {
  page(slug: $slug) {
    id
    slug
    title
  }
}

带变量：

{
  "slug" : "/"
}

但我收到此错误：

{
  "error": {
    "errors": [
      {
        "message": "Unknown argument \"slug\" on …

我正在使用 apollo hooks ( useQuery, useMutation)对 React 组件进行单元测试，并且在测试中我使用 apollo 的MockedProvider. 问题是，有时，我的模拟与组件实际进行的查询不匹配（创建模拟时输入错误，或者组件演变并更改了某些查询变量）。发生这种情况时，MockedProvided向组件返回一个 NetworkError。但是在测试套件中，没有显示警告。这令人沮丧，因为有时我的组件对useQuery. 这导致我曾经通过的测试突然无声无息地失败，让我很难找到原因。

这是使用useQuery以下组件的示例：

import React from 'react';
import {gql} from 'apollo-boost';
import {useQuery} from '@apollo/react-hooks';


export const gqlArticle = gql`
  query Article($id: ID){
    article(id: $id){
      title
      content
    }
  }
`;


export function MyArticleComponent(props) {

  const {data} = useQuery(gqlArticle, {
    variables: {
      id: 5
    }
  });

  if (data) {
    return (
      <div className="article">
        <h1>{data.article.title}</h1>
        <p>{data.article.content}</p>
      </div>
    );
  } else { …