标签: apollo

编辑：我正在寻找来自 Graphql-Angular 社区的权威和来源答案，以提供最佳实践示例。

例如，我们在 TypeScript 中定义了一个 Person 类型：

interface Person {
  firstName: string;
  lastName: string;
  birthDate: Date;
  age: number;
  ...and many more attributes
}

假设您有一个组件，并且根据 graphql 的口头禅，您只获取您需要的内容。没有过度获取和不足获取。

我只需要Person和firstName，age所以我在 Apollo 查询中进行了它。

现在，我如何输入我刚刚获取的这个对象？

该结构是 的一部分Person，所以我倾向于简单地这样做Partial<Person>。这使得所有声明的属性都是Person可选的。

但这不是这里发生的事情。Person我们仅使用age和来提取 的一部分firstName。就是这样。

除了制作另一个界面之外，是否没有其他方法可以正确输入：

interace MyComponentPerson {
  firstName: string;
  age: number;
}

有官方的风格指南/方法来做到这一点吗？我问过他们，但没有得到答复。也查看了文档，没有看到任何与此相关的内容。

我正在尝试通过 React with Apollo 进行一个非常基本的查询。

当我在 GraphiQL 中执行此查询时，我很好地得到了结果，但在我的应用程序中，我得到了一个未定义的数据对象。并显示错误消息：

网络错误：JSON 输入意外结束

查询是：

query {
    category(id: 3) {
        id
        children {
            id
            name
        }
    }
}

这是我的组件

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

const CATEGORIES_LIST = gql`
    query CATEGORIES_LIST {
        category(id: 3) {
            id
            children {
                id
                name
            }
        }
    }
`;

class Cat extends Component {
    render() {
        return (
            <div>
                <p>Items!</p>
                <Query query={CATEGORIES_LIST}>
                    {payload => {
                        console.log(payload);
                        return <p>fetch …

我正在尝试timeout设置prisma-labs/graphql-request. 我已经尝试过此处描述的方法 - https://github.com/prisma-labs/graphql-request/issues/103。

const client = new GraphQLClient(config.url, {
  timeout: 30000,
  headers: {
    Authorization: `Bearer ${token}`
  }
})

我的编译器抱怨超时没有直接出现在选项界面中 - https://github.com/prisma-labs/graphql-request/blob/master/src/types.ts#L7。

我是否需要扩展选项接口以使用超时字段？

Apollo 客户端的代码生成器添加| null了生成的类型，我不明白它们为什么在那里以及如何摆脱它们。

我不明白为什么 API 会返回 null 数组，所以我不想每次都检查我的代码是否为 null。

来自 apollo codegen 的违规生成类型：

export interface MusicGenres_musicGenres {
  name: string;
}

export interface MusicGenres {
  musicGenres: (MusicGenres_musicGenres | null)[];
                                        ^^^^^^
                                         WHY ?
}

我的 Graphql 架构：

type Query {
  musicGenres: [MusicGenre]!
}

type MusicGenre {
  id: ID!
  name: String!
}

在我的 TypeScript 代码中查询生成类型：

gql`
  query MusicGenres {
    musicGenres { name }
  }
`

我有以下 GraphQL 查询（使用 Apollo Client JS）：

query GetUsers($searchFilter: String) {
    users(
        first: 10,
        filter: { search: $searchFilter }
    ) {
        nodes {
            id
            name
        }
    }
}

当我传递参数时，这很有效$searchFilter。但是，我希望这个$searchFilter参数是可选的。因此，当它出现时，null它不会应用过滤器。

这看起来很简单，但 API 要求search不可为空。filter: { search: null }所以不允许传入。

我想实现以下目标：

query GetUsers($searchFilter: String) {
    users(
        first: 10,
        filter: $searchFilter = null ? null : { search: $searchFilter }
    ) {
        nodes {
            id
            name
        }
    }
}

我如何有条件地包含filter参数？

我正在尝试在 React js 中向 apollo 客户端添加授权令牌以让用户登录...

索引.js

import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter as Router } from 'react-router-dom';\nimport { ThemeProvider } from 'react-jss';\nimport Theme from 'resources/theme';\nimport Routes from 'routes';\nimport './index.css';\nimport * as serviceWorker from './serviceWorker';\nimport { Auth0Provider } from "@auth0/auth0-react";\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport ReactNotification from 'react-notifications-component'\nimport './components/orders/fonts/NotoSansJP-Regular.otf'\nimport 'react-notifications-component/dist/theme.css'\nimport { ApolloProvider , ApolloClient, InMemoryCache } from '@apollo/client';\nimport { useAuth0 } from "@auth0/auth0-react";\n\n\nconst client = new ApolloClient({\nuri: process.env.REACT_APP_API_BACK ,\nheaders: {\n  Authorization: `Bearer ${accessToken}` // doesn\xe2\x80\x99t work \n },\n  cache: …

使用以下 graphql：

scalar Date

type MyModel {
  id: ID!
  date: Date!
}

query MyModels {
  myModels {
    id
    date
  }
}

type Query {
  myModel: [MyModel!]
}

和解析器：

import { DateTimeResolver } from 'graphql-scalars'
const resolvers = {
  // Scalars
  Date: DateTimeResolver,

  myModels: async () => {
    return await context.user.getMyModels()
  }
}

我的查询返回date: "2021-02-07T06:58:51.009Z". 是否可以让 Apollo Client 将其转换为 Date 对象？

我正在尝试从 Apollo 缓存获取数据。我知道数据在那里，因为在 Apollo 开发工具中指定的记录可用。在我的 React 应用程序中，我进行了简单的单击并设置了 Id，该 Id 随后传递给查询。结果client.readQuery(...)是null. 我在旋转，因为不知道为什么。我使用的代码与文档中的代码完全相同。

这是一个查询：

export const RECRUIT_QUERY = gql`
  query Recruit($id: ID!) {
    Recruit(_id: $id) {
      _id
      firstName
    }
  }
`;

组件中apollo hooks的使用：

const client = useApolloClient();
const recruit = client.readQuery({
  query: RECRUIT_QUERY,
  variables: { id: selectedId }
})

阿波罗的配置：

export const client = new ApolloClient({
  link: concat(
    authMiddleware,
    new HttpLink({
      uri: process.env.REACT_APP_API_URL,
    }),
  ),
  cache: new InMemoryCache(),
});

这是 apollo 商店预览：

我无法使用 apollo Studio。迁移到 Graphql 游乐场后。当我尝试在本地主机中运行并将我重定向到 apollo studio sanbox https://studio.apollographql.com/sandbox?endpoint=http%3A%2F%2Flocalhost%3A5018%2Fgraphql时：无法连接到本地主机。

请帮忙解决这个问题

我正在尝试设置我的服务器端后端，但遇到了此错误：

node_modules/apollo-cache-control/dist/index.d.ts:24:9 - error TS2717: Subsequent property declarations must have the same type.  Property 'cacheControl' must be of type 'ResolveInfoCacheControl', but here has type '{ setCacheHint: (hint: CacheHint) => void; cacheHint: CacheHint; }'.

24         cacheControl: {
           ~~~~~~~~~~~~

  node_modules/@nestjs/graphql/node_modules/apollo-server-types/dist/index.d.ts:140:9
    140         cacheControl: ResolveInfoCacheControl;
                ~~~~~~~~~~~~
    'cacheControl' was also declared here.