我正在尝试根据搜索关键字获取 Shopify 产品。

我通过在查询中传递硬编码值来测试此查询，它工作正常，但我需要传递变量值，因此在这种情况下它会给出错误

Grapghql 查询错误 searchKeyword 已声明但未使用。

这是我根据title,tag和搜索产品的查询product_type。

不成功案例：

export const searchProductsQuery = gql` query($searchKeyword: String!){
    shop {
        products(first: 10, query:"title:'$searchKeyword' OR tag:'$searchKeyword' OR product_type:'$searchKeyword'") {
            edges {
                cursor
                node {
                    id
                    title
                    handle
                    description
                    productType
                    images(first: 5) {
                        edges {
                            node {
                                id
                                src
                            }
                        }
                    }
                    variants(first: 5) {
                        edges {
                            node {
                                id
                                title
                                price
                            }
                        }
                    }
                }
            }
        }
    }
}`;

成功案例：

export const searchProductsQuery = gql` query{ …

我正在使用Downshift和构建一个 React type advance 文本字段组件react-apollo。当用户输入时，我正在查询输入建议并将其显示在文本字段下方。

不幸的是，这段经历并不顺利。由于某种原因，Apollo 时不时会取消 50% 以上的请求。

我还记录了由 HoC 封装的组件可以访问的响应数据graphql。在所需的情况下，加载状态设置为false并且我的words数据可用。在不希望的情况下，加载状态被设置为true并且没有words可用数据。无论是期望的还是不期望的请求，后端每次都会执行。

不良情况

请注意 的网络状态1。

所需案例

请注意 的网络状态7。

为什么 apollo 取消这些请求？如何解决这个问题？

使用MockedProvider我们可以模拟非常直接的输出，例如

let mocks = [{
    request: { query: DATA_QUERY, variables: {...} }
    result: {
        data: {...},
        refetch: () => console.log('refetch mocked') 
    }
}]
<MockedProvider mocks={mocks} addTypename={false}>
    <ComponentToTest />
</MockedProvider>

这在执行时给了我成功的模拟输出DATA_QUERY

<Query query={DATA_QUERY} variables={...} fetchPolicy='cache-and-network' >
      {({data, refetch}) => refetch()
</Query>

哪个应该登录refetch mocked控制台，但在我的情况下没有发生。可能这不是模拟该refetch函数的正确方法，不是吗？如果没有，有什么方法可以refetch使用以下方法来模拟该函数MockedProvider

感谢期待

突变

Mutation: {
  signUp: (_, { res }) => {
    try {
      res.cookie("jwt", "token", {
        httpOnly: true
      });
      return "Amasia";
    } catch (error) {
      return "error";
    }
  };
}

Apollo-clenet-反应

const [addTodo, { loading, error, data }] = useMutation(gql);

  const [formSignUp, setFormSignUp] = useState({
    lastName: '',
    firstName: '',
    password: '',
    email: '',
  });

  const change = e => {
    const { value, name } = e.target;
    setFormSignUp({ ...formSignUp, [name]: value });
  };

当我从反应中提出请求时。这是我从服务器得到的答案。

1)数据 {"data": {"signUp": "Amasia"}}

2)网络 …

我正在研究如何使用 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 ？

我正在学习 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那么我看到只有一个项目重新渲染- 渲染。