标签: react-apollo

在我的应用程序中发送createMessage突变后，我想ApolloStore使用updateQueries.

我的设置如下：

const ChatWithAllMessages = graphql(allMessages, {name: 'allMessagesQuery'})(Chat)
export default graphql(createMessage, {
   props({ownProps, mutate}) {
    return {
      createMessageMutation(text, conversationId) {
        return mutate({
          variables: { text, conversationId },
          updateQueries: {
            allConversations: (previousState, {mutationResult}) => {
              console.log('Chat - did send mutation for allConversationsQuery: ', previousState, mutationResult)
              return ...
            }
          }
        })
      }
    }
  }
})(ChatWithAllMessages)

我createMessageMutation在代码中这样调用：

_onSend = () => {
  this.props.createMessageMutation(this.state.message, this.props.conversationId)
}

通过此设置，我希望updateQueries执行我在值中指定的函数，但是，这似乎不会发生（日志记录语句永远不会被打印）。

作为参考，查询如下allConversation所示ApolloStore：

另外，我的 JS …

我正在尝试使用 graphql-ruby 和 rails 为过滤器实现输入类型。

基本输入类型如下所示：

module Types
  class BaseInputObject < GraphQL::Schema::InputObject
  end
end

我自己的输入类型看起来像：

module Types
    class PhotoFilterType < Types::BaseInputObject
        argument :attribution, String, "Filters by submitter", required: false
        argument :country, String, "Filters by country", required: false
        argument :year, Int, "Filters by year", required: false
    end
end

query_type 的方法标题如下所示：

    field :filtered_photos, [Types::PhotoType], null: true do
      argument :filters, Types::PhotoFilterType, 'filters for photo', required: true
    end

查询如下：

const FILTER_QUERY = gql`
  query getFilteredPhotos($filters: PhotoFilterType!) {
    filteredPhotos(filters: $filters) {
      id
      title
      width
      height …

我在开始使用 React、Apollo 和 AWS-AppSync 时遇到了问题。我无法解决此错误消息：

TypeError: this.currentObservable.query.getCurrentResult is not a function

我正在使用@apollo/react-hooks 和 aws-appsync 的更新包。

我目前的设置看起来像这样。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import config from './aws-exports';
import AWSAppSyncClient from 'aws-appsync';
import { ApolloProvider } from '@apollo/react-hooks';

const client = new AWSAppSyncClient({
    url: config.aws_appsync_graphqlEndpoint,
    region: config.aws_appsync_region,
    auth: {
        type: config.aws_appsync_authenticationType,
        apiKey: config.aws_appsync_apiKey
    }
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </ApolloProvider>,
    document.getElementById('root')
);

我有一个函数可以进行如下查询：

import React …

我正在研究如何使用 Jest 对我们项目的 Redux 代码进行单元测试。我一直在阅读“官方”Redux 建议，但我们的代码与他们引用的 Redux 设置不同，因为我们使用了Redux 工具包(RTK) 和“ createSlice ”，它可以自动执行某些过程，例如 action创造者创造。我们如何对 RTK 创建的 Redux 进行单元测试createSlice？例如，由于动作创建器是自动创建的，测试它们是否有意义？一般来说，由于大部分 RTK 设置是自动的，我们需要测试什么？Redux Tool Kit 是否有任何工具可以使这更容易？（我没有看到）。

此外，我们还有 Redux Thunks，我们已经“手工”设置了它。我们看到了Redux 文档的建议，但是参考上述内容，我们是否应该以不同的方式处理此测试，因为我们使用 RTK 和createSlice?

最后，Redux 所依赖的 API 调用通过 Apollo Client 运行。我看到Apollo 关于如何使用 React 客户端测试 React 的建议。为了测试 Redux，我们是否应该使用类似https://www.npmjs.com/package/mock-apollo-client 的东西来模拟 Apollo Client ？

问题：

你好，所以我在我的 ReactJS 应用程序上使用 apollo-client 已经有一段时间了。我刚刚注意到，有时当我使用useQuery钩子时，执行完全忽略skip参数，并继续onCompleted（尽管没有任何数据）。有趣的是，它也没有向我的端点发出 API 请求。但是，如果我只是设置skip为 false，那么一切正常（如预期）。

此外，每次我使用useQuerywith时都不会发生这种情况skip，它似乎适用于某些而不是其他。

为什么 apollo 忽略skip参数并onCompleted立即使用空数据执行？有没有修复（除了useLazyQuery）？

代码示例：

const userQuery = useQuery(GET_USER, {
    variables: {
      value: userId,
    },
    skip: true,
    onCompleted: props => {
      console.log(`props => `, props)
      const {
        user: { type, role, firstName, lastName, permissions },
      } = props;

      setValue('firstName', firstName);
      setValue('lastName', lastName);
      setValue(
        'type',
        userTypes.find(({ value }) => value === type),
      );
      setValue( …

我正在学习 apollo 和 graphQL，并且有一个简单的应用程序，它显示一个数据列表，带有一个添加到数组的 fetchMore 函数。

我想删除 updateQuery，因为它已被弃用并使用新的字段策略合并功能。当前缓存设置和 updateQuery 如下所示：

const cache = new InMemoryCache({
  typePolicies: {
    client_client: {
      fields: {
        // add local only value to clients
        isEdited: {
          read(value = false) {
            // when writing the new value return new value or false as default
            return value;
          },
        }
      }
    }
  }
});

  const onFetchMore = () => {
    fetchMore({
      variables: {
        offset: page
      },
      updateQuery: (previousResult, { fetchMoreResult, queryVariables }) => {
        return {
          ...previousResult,
          client_client: [ …

我试图在一个返回 Apollo Client 的类中构建一个简单的函数。这是我的代码：

import appConfig from 'config/app-config';
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import LocalStorageKeys from 'constants/local-storage-keys';
import { setContext } from '@apollo/client/link/context';

export class ApolloClientServiceImpl {
  private cache: InMemoryCache;
  constructor() {
    this.cache = new InMemoryCache();
  }

  createApolloClient(idToken: string): unknown {
    const httpLink = createHttpLink({
      uri: appConfig.hasura.url,
    });
    const authLink = setContext((_, { headers }) => {
      let bearerToken = localStorage.getItem(LocalStorageKeys.TOKEN);
      if (idToken) {
        bearerToken = idToken;
      }
      return {
        headers: {
          ...headers,
          authorization: bearerToken ? `Bearer …

我正在实现 using @apollo/client，但我没有看到任何完整的@apollo/clientwith示例react。如果我搜索，我会得到示例 apollo-client和apollo boost。

3个有什么区别。 我理解的@apollo/client都是新版的。我在哪里可以得到完整的例子@apollo/client与react应用？

import { ApolloClient, InMemoryCache, ApolloLink, createHttpLink, defaultDataIdFromObject } from '@apollo/client';
import { ApolloClient, InMemoryCache, ApolloLink } from 'apollo-boost';

1. 我有父组件A从中获取 TODO 列表（假设有 10 个项目），然后映射此数组并将整个对象传递给组件B。

2. 组件B有一个备忘录包装器来比较todo对象引用以仅重新渲染更新的组件。喜欢：

   export default memo(ComponentB, (prevProps, nextProps) => {  
    return prevProps.TODO === nextProps.TODO
   })
   

   Run Code Online (Sandbox Code Playgroud)

3. 从组件B上的按钮单击调用useMutation以在列表中添加一项。我在Apollo doc上提供了乐观响应和更新功能

4. 一切正常，除了：当我为快速 UI 更改添加optimizeResponse并在组件B 中登录时，我看到每个列表项都在重新渲染，但是如果我只保留更新功能而没有optimizeResponse那么我看到只有一个项目重新渲染- 渲染。