标签: react-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);

我错过了什么？

所以我试图在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 = …

我正在搞乱ag-grid,react-apollo,一切似乎都运转正常.这里的目标是单击一个复选框,并在修改某些数据时发生变异/网络请求.我遇到的问题是它重绘整行,这可能非常慢但我真的只是想更新单元本身,所以它的快速和用户体验更好.我有一个想法是做一个乐观的更新,只是更新我的缓存/利用我的缓存.你们采取了什么方法.

通过apollo查询抓取列和行数据.

下面是一些代码:

CheckboxRenderer

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import _ from "lodash";

class CheckboxItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false
    };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  componentDidMount() {
    this.setDefaultState();
  }

  setDefaultState() {
    const { data, colDef, api } = this.props;
    const { externalData } = api;
    if (externalData && externalData.length > 0) {
      if (_.find(data.roles, _.matchesProperty("name", colDef.headerName))) {
        this.setState({
          value: true
        });
      }
    }
  }

  updateGridAssociation(checked) {
    const { …

我有一组突变触发某些类型的弹出窗口的本地状态.它们通常设置如下:

  openDialog: (_, variables, { cache }) => {
    const data = {
      popups: {
        ...popups,
        dialog: {
          id: 'dialog',
          __typename: 'Dialog',
          type: variables.type
        }
      }
    };

    cache.writeData({
      data: data
    });
    return null;
  }

我传入的默认值如下:

const defaults = {
  popups: {
    __typename: TYPENAMES.POPUPS,
    id,
    message: null,
    modal: null,
    menu: null,
    dialog: null
  }
};

它们在我的React代码中的使用方式是使用Mutation包装器组件,如下所示:

const OPEN_ALERT_FORM = gql`
  mutation AlertOpenDialog($type: String!) {
    openDialog(type: $type) @client
  }
`;

class Alert extends Component {
  render() {
    return (
      <Mutation mutation={OPEN_ALERT_FORM} variables={{ …

我是 GraphQL/Apollo 的新手，我很难用 React 应用程序设置它。

我有一个 React 组件，它从使用 Amplify/AppSync 构建的 GraphQL API 加载列表。

如果我手动调用以获取项目，即：

    const videosData = await client.query({
      query: gql(queries.listVideos)
    });
    const videosItems = videosData.data.listVideos.items;
    setVideosData(videosItems);

奇迹般有效。但是，如果我尝试使用 Apollo Query 组件或 useQuery 挂钩，则会引发以下错误：

类型错误：this.currentObservable.query.getCurrentResult 不是函数

如果我只是添加行来使用钩子获取查询，它已经给了我这个错误

钩子调用：

const {loading, error, data, refetch} = useQuery(gql(queries.listVideos));

引发问题的被调用函数：

QueryData.getQueryResult
node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:325
  322 |     called: true
  323 |   });
  324 | } else {
> 325 |   var currentResult = this.currentObservable.query.getCurrentResult();
      | ^  326 |   var loading = currentResult.loading,
  327 |       partial = currentResult.partial,
  328 …

我正在使用 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 { …

我正在开发一个应用程序，在该应用程序中可以使用方向舵和其他东西配置一艘船。数据库结构有点嵌套，到目前为止，我一直将 GraphQL 查询与数据库保持一致。

这意味着：我可以使用一些查询 ship(projectId, shipId) 获取一艘船，但我使用的是嵌套查询：

query {
    project(id:1) {
        id
        title
        ship(id:1) {
            id
            name
            rudders {
                id
                position
            }
        }
    }
}

这样的结构当然会导致很多嵌套数组。例如，如果我刚刚添加了一个新方向舵，则必须使用 cache.readQuery 进行检索，它为我提供项目对象而不是方向舵列表。要将方向舵添加到缓存中，我会得到一条带有嵌套的、解构的对象的长行，这使得代码难以阅读。

所以我想到了使用 GraphQL 片段。在 Internet 上，我看到它们被大量使用以防止必须在大量对象上重新键入多个字段（我个人认为这也非常有用！）。然而，片段用于数组的例子并不多。

当将一些数据附加到嵌套在某些缓存查询中的数组时，数组的片段可以保存所有对象解构。使用 Apollo 的 readFragment 和 writeFragment，我设法让一些东西工作起来。

片段：

export const FRAGMENT_RUDDER_ARRAY = gql`
    fragment rudderArray on ShipObject {
        rudders {
            id
            position
        }
    }
`

用于主船查询：

query {
    project(id: ...) {
        id
        title
        ship(id: ...) {
            id
            name
            ...rudderArray
        }
    }
}
${RUDDER_FRAGMENT_ARRAY}

使用这个，我可以编写一个更清晰的 update() 函数来在突变后更新 Apollo 的缓存。见下文： …

在我的应用程序中，我使用以下NPM 模块来使用Strapi、GraphQL和Next.js：

• 反应阿波罗
• 下一个阿波罗
• 图形
• 格列
• 重组

在下一步中，我将创建 Apollo 配置文件，示例如下：

import { HttpLink } from "apollo-link-http";
import { withData } from "next-apollo";

const config = {
  link: new HttpLink({
    uri: "http://localhost:1337/graphql",
  })
};
export default withData(config);

然后在类组件中，我使用静态方法getInitialProps()通过 GraphQL 查询从 Strapi 获取数据。

一切都很好，但也许有另一种更好的方式通过 React 钩子或任何其他方式？

我在一个带有 Apollo 客户端的项目中使用 GraphQL，当我使用时，writeFragment我必须将对象形状与片段定义相匹配。我现在正在手动执行此操作，但这会导致大量不必要的代码，并在片段定义更改时使事情变得脆弱。

我想从gql片段生成一个空的 JavaScript 对象。例如

export const instructorFragment = gql`
  fragment InstructorDetails on InstructorProfile {
    id
    user_id
    picture_url
    title
    bio

    tags {
      ...TagDetails
    }
  }
  ${tagFragment}
`;

export const tagFragment = gql`
  fragment TagDetails on Tag {
    id
    label
  }
`;

应该生成类似的东西：

{
    id: null,
    user_id: null,
    picture_url: null,
    title: null,
    bio: null,
    tags: {
        id: null,
        label: null
    }
}

片段对象有足够的信息来做到这一点，但尽管谷歌搜索了很多，我还是没能找到一个库。

• 选项 1 是使用已经存在的东西
• 选项 2 是编写我自己的函数
• 选项 3 是：

我正在使用GraphQL 代码生成器 …

我想获取动态类型的数据。为此，我在 graphql 查询中使用片段。Api 在 graphql Playground 中工作正常，但是当我尝试将它与 React-apollo 客户端集成时，它也给了我一个空对象以及警告！控制台中正在进行的启发式片段匹配。

当我使用 npm install 和 npm run start 时它也可以工作，但是当我切换到yarn install 和yarn run start 时它给了我一个错误。

我使用 IntrospectionFragmentMatcher 并将 fetchPolicy 设置为“缓存和策略”。

我还共享了用于客户端配置的 IntrospectionFragmentMatcher 的代码。

query GetContentSections($contentPageId: Int) {
  contentSection {
    searchContentSections(contentPageId: $contentPageId, status: [ACTIVE]) {
      id
      contentLayoutId
      sort
      sectionContainers {
        id
        sort
        snippets {
          id
          sort
          type: __typename
          ...quote
          ...text
          ...image
          ...video
          ...audio
          ...button
          ...popup
          ...map
          ...code
          ...app
        }
      }
    }
  }
}
fragment text on ContentSnippetTextType{
  text
}
fragment image on ContentSnippetImageType{
  assetId …