标签: apollo

我有一个使用 Angular 10 和 Apollo GraphQL 的网站。

每当请求失败时，我想向用户显示错误MatSnackBar，但我不知道如何MatSnackBar向.OnError()apollo-link-error

这是我的graphql.module.ts代码：

import {NgModule} from '@angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, ApolloLink, InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import { onError } from 'apollo-link-error';

function getNewToken(): any {
  //TODO: need to implement
}

const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
    if (graphQLErrors) {
      for (const err of graphQLErrors) {
        switch (err.extensions?.code) {
          case 'UNAUTHENTICATED':
            // error code is set …

有人可以提供使用 Apollo Client 3.0 字段策略实现分页的示例吗？我一直在遵循文档中的示例来实现无限滚动，但在我的控制台中我收到以下警告：

fetchMore 的 updateQuery 回调已弃用，并将在 Apollo Client 的下一个主要版本中删除。

请将 updateQuery 函数转换为具有适当读取和合并函数的字段策略，或使用/改编 @apollo/client/utilities 中的辅助函数（例如 concatPagination、offsetLimitPagination 或 relayStylePagination）。

字段策略系统比手写的 updateQuery 函数更有效地处理分页，并且您只需要定义一次策略，而不是每次调用 fetchMore 时。

所以我尝试用新的 Apollo 方法来实现分页

列表组件.ts

// getOffers() 在 OnInit() 中运行

  getOffers(): void {
    this.searchService.search
      .pipe(
        tap(() => {
          this.spinnerService.showLoader();
        }),
        switchMap((term) => {
          this.lookupTerm = term;
          return this.offersGQL.watch({
            phrase: term,
            offset: this.pageOffset,
            limit: this.pageSize
          }, { fetchPolicy: 'network-only' })
            .valueChanges
            .pipe(
              retry(40),
              map((result) => result.data),
              tap(() => {
                this.spinnerService.hideLoader();
              })
            )
        }
        )
      )
      .subscribe((result) => …

我写了一个调用 apollo 的钩子useQuery。这很简单：

使用决策者：

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

export const GET_DECIDER = gql`
  query GetDecider($name: [String]!) {
    deciders(names: $name) {
      decision
      name
      value
    }
  }
`;

export const useDecider = name => {
  const [enabled, setEnabled] = useState(false);

  useQuery(GET_DECIDER, {
    variables: {
      name
    },
    onCompleted: data => {
      const decision = data?.deciders[0]?.decision;
      setEnabled(decision);
    },

    onError: error => {
      return error;
    }
  });

  return {
    enabled
  };
};

我现在正在尝试测试它，但MockedProvider …

我的 Apollo 缓存中有一个 NuxtJS 应用程序，其中包含深度嵌套的数据。作为一个例子，我的缓存可能看起来像这样，其中旅行有许多类别，其中有许多项目。

ROOT_QUERY
  trips: [Trip]
    0: Trip:1
      categories: [Category]
        0: Category:1
          items: [Item]
            0: Item:1
            1: Item:2
            2: Item:3  
    1: Trip:2

我正在尝试在删除或添加项目到位于 的项目数组中后更新缓存trips[0].categories[0]。我所拥有的功能有效，但只有在与我的服务器通信并返回响应时似乎有 1-2 秒的延迟之后。在我看来，optimisticResponse要么无法正常工作，要么数据嵌套太深，无法足够快地更新 UI。

这是我的removeItem函数的样子：

import { remove } from 'lodash';

async function removeItem ({ fields, trip_id, apollo }) {
  return await apollo.mutate({
    mutation: removeItemMutation,
    variables: fields,
    optimisticResponse: {
      __typename: 'Mutation',
      removeItem: {
        __typename: 'item',
        id: fields.item_id,
        name: '',
        weight: 0,
        unit: '',
        price: 0,
        category_id: fields.category_id,
        quantity: 0, …

现在我尝试在 Strapi GraphQL 游乐场中的位置内使用多个 _and 进行查询。我正在使用的查询是：

 {
  clients(
    where: {
      _and: [{ name: { _contains: "a" } }, { endDate: { _gte: "2017-12-31" } }]
    }
  ) {
    id
    name
    endDate
    reasonForEnding
  }
}

但出现错误提示如下：

 "Error: Your filters contain a field '_and' that doesn't appear on your model definition nor it's relations".

如何使用 GraphQL 在 Strapi 中使用多个 _and 条件 where 子句正确进行查询

我在 apollo-graphQL 中的枚举类型有问题，我在 nodejs 中使用 apollo-server 。问题是我无法使用具有像 image/jpeg 或 svg+xml 这样的值的字符串。它给我带来了错误，这些值无法解析为枚举。

有人可以告诉我如何解决这个问题吗？

我使用 Apollo 设置了一个 React 应用程序，以拥有一个处理从网络加载数据的包装器组件，以便下面的每个组件都可以直接从 Apollo 缓存查询数据，而不必担心处理加载状态。因此，我的组件如下所示：

export const COUNT_OFF_ADAPTER_QUERY = gql`
  query CountOffAdapterQuery($vampId: ID!) {
    vamp(id: $vampId) @client {
      id
      countingOff
      countingOffStartTime
    }
  }
`;

export const CountOffAdapter: React.FC<{}> = () => {
  const vampId = useCurrentVampId();

  const {
    data: {
      vamp: { countingOff, countingOffStartTime }
    }
  } = useQuery<CountOffAdapterQuery>(COUNT_OFF_ADAPTER_QUERY, {
    variables: { vampId }
  });

  const prev = usePrevious({ countingOff, countingOffStartTime });

  const countOff = useCountOff();

  useEffect(() => {
    // Do react stuff
  }, [countOff, countingOff, prev]);

  return …

我尝试过但没有成功。出现错误：评估 SSR 模块 /node_modules/cross-fetch/dist/browser-ponyfill.js 时出错：

<script lang="ts">
import fetch from 'cross-fetch';
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";

const client = new ApolloClient({
    ssrMode: true,
    link: new HttpLink({ uri: '/graphql', fetch }),
    uri: 'http://localhost:4000/graphql',
    cache: new InMemoryCache()
  });
</script>

自从弃用以来，apollo-server-testing我正在使用与 apollo-server 进行集成测试的新方法（包含在 apollo-server 2.25.0 中）。从突变登录中，我在 OutgoingMessage 标头（在 中'Set-Cookie'）中设置了刷新令牌。

简化的解析器

    @Mutation(() => RefreshTokenOutput)
    async refreshToken(@Ctx() { response, contextRefreshToken }: Context): Promise<RefreshTokenOutput> {
        if (contextRefreshToken) {
            const { accessToken, refreshToken } = await this.authService.refreshToken(contextRefreshToken);
            response.setHeader(
                'Set-Cookie',
                cookie.serialize('refreshToken', refreshToken, {
                    httpOnly: true,
                    maxAge: maxAge,
                    secure: true,
                })
            );
            return { accessToken: accessToken };
        } else {
            throw new AuthenticationError();
        }
    }

测试用例

            // given:
            const { user, clearPassword } = await userLoader.createUser16c();
            const input = new …

我更新了我的 nextjs 安装和 apollo，

错误：找不到模块“micro”需要堆栈：

• C:\work\cloud\node_modules\apollo-server-micro\dist\ApolloServer.js
• C:\work\cloud\node_modules\apollo-server-micro\dist\index.js
• C:\work\cloud.next\server\pages\api\auth.js
• C:\work\cloud\node_modules\next\dist\next-server\server\next-server.js
• C:\work\cloud\node_modules\next\dist\server\next.js
• C:\work\cloud\node_modules\next\dist\server\lib\start-server.js
• C:\work\cloud\node_modules\next\dist\cli\next-dev.js
• C:\work\cloud\node_modules\next\dist\bin\next 位于 Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) 位于 Function.mod._resolveFilename (C:\work\cloud \node_modules\next\dist\build\webpack\require-hook.js:4:1855) 在 Function.Module._load (internal/modules/cjs/loader.js:746:27) 在 Module.require (internal/modules) /cjs/loader.js:974:19) 在需要 (internal/modules/cjs/helpers.js:92:18) 在对象。(C:\work\cloud\node_modules\apollo-server-micro\dist\ApolloServer.js:5:17) 在 Module._compile (internal/modules/cjs/loader.js:1085:14) 在 Object.Module 处。 _extensions..js（内部/模块/cjs/loader.js：1114：10）在Module.load（内部/模块/cjs/loader.js：950：32）在Function.Module._load（内部/模块/cjs） /loader.js:790:14) { 代码: 'MODULE_NOT_FOUND', requireStack: [ 'C:\work\cloud\node_modules\apollo-server-micro\dist\ApolloServer.js', 'C:\work\cloud\ node_modules\apollo-server-micro\dist\index.js', 'C:\work\cloud\.next\server\pages\api\auth.js', 'C:\work\cloud\node_modules\next\dist \next-server\server\next-server.js', 'C:\work\cloud\node_modules\next\dist\server\next.js', 'C:\work\cloud\node_modules\next\dist\server \lib\start-server.js', 'C:\work\cloud\node_modules\next\dist\cli\next-dev.js', 'C:\work\cloud\node_modules\next\dist\bin\next ']}

我不确定缺少什么，因为这是在包更新之前工作的 - 阅读在线文档似乎没有对 apollo 服务器微的工作方式进行任何更改？