标签: react-apollo

尝试将嵌套变量传递给 GraphQL 查询，但我的服务器仅获取顶级变量 ( shopId)，其他所有内容均为 null。

我试过：

#1

const CALCULATE_PACKAGE_PRICE = gql`
  query CalculatePackagePrice(
    $shopId: String!
    $address1: String
    $zip: String
    $city: String
    $countryCode: String
    ) {
    calculatePackagePrice(
      where: {
        shopId: $shopId
        destination: {
          address1: $address1
          zip: $zip
          city: $city
          countryCode: $countryCode
        }
      }
    ) {
      name
      price
      userErrors {
        field
        message
      }
    }
  }
`

const [calculatePackagePrice, { loading, data }] = useLazyQuery(
  CALCULATE_PACKAGE_PRICE,
  {
    variables: {
      shopId: shopId,
      destination: {
        address1: "Example 123",
        zip: "123",
        city: "Test",
        countryCode: …

初学者在这里。

尝试从服务器获取一些数据并在获取后将其显示在我的反应组件中。但是，我在将异步函数集成到我的反应组件中时遇到了麻烦。

import React, { useState } from "react";
import { request } from "graphql-request";

async function fetchData() {
  const endpoint = "https://localhost:3090/graphql"

  const query = `
    query getItems($id: ID) {
      item(id: $id) {
        title
      }
    }
  `;

  const variables = {
    id: "123123123"
  };

  const data = await request(endpoint, query, variables);
  // console.log(JSON.stringify(data, undefined, 2));

  return data;
}

const TestingGraphQL = () => {
  const data = fetchData().catch((error) => console.error(error));

  return (
    <div>
      {data.item.title}
    </div>
  );
};

export default …

我有一个需要输入参数的查询，比如日期

  const { loading, data, error } = useQuery(GET_LIST, {
    variables: {
      input: {
        date: date,
      },
    },
  });

export const GET_LIST = gql`
  query list($input: ListParams) {
    list(input: $input) {
      totalCount
      recordCount
      list {
        listId
        date
        qty
        amount
        currency
      }
    }
  }
`;

input ListParams {
  date: String
}

我需要获取列表，用户可以根据日期进行过滤。现在，在初始加载时，未设置日期，而是调用查询。用户设置日期，没有问题，使用日期值再次调用查询，现在当用户删除日期过滤器时，日期值变得未定义，我希望这次再次调用 useQuery ，没有变量，但它从未被调用过。

我也尝试过设置空字符串，即使这样 useQuery 也不会被调用，这不是预期的行为

 input: {
        date: date||'',
      },

我正在使用 Apollo Client 3.0 从 graphql 服务器获取数据，但我无法决定使用什么进行本地状态管理（Redux 或 Apollo Client 3.0）。

我认为 Redux 迫使我编写更多代码，但以可预测且更清晰的方式编写，这很好。另外，将 Redux 添加到应用程序意味着我将混合使用 2 个状态管理库。

Apollo Client 3.0有Reactive Variables，但是对于大型应用程序我认为它会变得一团糟！我还可以使用 @client 指令进行查询和突变，但这可能有点令人困惑。

你给我推荐什么？我应该用什么？你能给我提供一些好的例子吗？

谢谢！

我需要动态更改我的变异文档,以便能够在单个变异中创建多个项目.所以我有这个函数createOrderName,它接受一个整数,并能够创建正确的变异文档.例如.createOrderName(2)得到

mutation createOrderMut($input0: AddToOrderMenuItemConnectionInput!, $input1: AddToOrderMenuItemConnectionInput!) {
  input0: addToOrderMenuItemConnection (input:$input0) {
    changedOrderMenuItem {
      id
    }
  }
  input1: addToOrderMenuItemConnection (input:$input1) {
    changedOrderMenuItem {
      id
    }
  }
}

我的容器如下.

const CartContainer = compose(
  graphql(createOrderName(2), {
    props: ({ mutate }) => ({
      addToOrderMenuItem: (menus, orderId) => mutate({
        variables: createOrdersInput(menus, orderId)
      })
    })
  })
)(CartView)

现在,我如何将整数值传递给此突变,以便创建正确的突变文档？目前它已修复为2,但我需要它更灵活,所以我可以创建任意数量的项目......

所以我使用 apollo 客户端添加到一个带有突变的对象列表中。假设我有一个事件，我正在添加参与者，并且我正在使用 refetchQueries 在详细信息屏幕上与参与者一起获取刷新的事件。不幸的是，data.loading == true在这次重新获取期间我没有得到状态，这使得用户很可能会反复点击加入参与者按钮。

<Button styleName="dark full-width" onPress={()=> {
            this.props.joinEvent({
                variables: { eventId: Event.id, userId: user.id },
                refetchQueries: ['getEvent'],
              });
              // how do I trigger the data.loading = true like it does during the initial fetch?
          }
        }>

我有一个 GraphQL 查询，它返回一个项目数组。我可以在GraphiQL 中运行查询并获得我预期的结果。

我有一个反应的应用程序，用途react-apollo和@graphql装饰来解决同样的查询组件的道具。当通过 运行查询时react-apollo，返回数组中的每一项都是相同的——每一项都被最后一项“覆盖”。

我可以在 dev-tools network 选项卡中看到正确的数组项是通过网络发送的，所以这个问题似乎与 react-apollo 有关。什么可能导致 react-apollo 覆盖数组元素？

我知道如何使用片段，我现在的问题是片段只能在类型的查询/突变中使用。

例如。

paginationFragment on Person

我想我正在寻找的是类似于片段但更一般的。

例如。我有一个 PersonBrowseQuery、EventsBrowseQuery、BookmarkBrowseQuery 等。都有一个包含我的分页数据的元字段

meta {
  total
  per_page
  current_page  

  etc.    
}

是否可以将其分解为可重复使用的东西？

我刚刚在一个简单的React Native应用程序上使用Apollo GraphQL,它对它的功能印象非常深刻.但我并没有完全了解它如何与Redux商店集成.从本质上讲,我需要将一些用户输入传递searchReducer给我的GraphQL查询.我以为我可以简单地将连接的组件传递给我的GraphQL查询并提供变量,但它没有找到prop searchInput.这是代码:

import React, { Component } from 'react';
import { FlatList, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import Repository from './Repository';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

const query = gql`
    query repositoryOwner($login: String!) {
        repositoryOwner(login: $login) {
            url,
            avatarUrl(size: 100),
            repositories(first: 5) {
                nodes {
                    name,
                    description
                }
            }
        }
    }`;

class RepositoryList extends Component {

    renderItem = ({ item }) => { …

我正在使用react-apollo，已经使用了一段时间。对我来说，已经成为问题的一件事是，使用变异时refetch无效。事实上，只要我一直在使用该应用程序，这就是一个已知问题。

我已经通过使用refetch查询中可用的道具解决了这个问题。

    <Query query={query} fetchPolicy={fetchPolicy} {...props}>
      {({ loading, data, error, refetch }) => {
     ... pass down to mutation
    </Query>

但是，我现在在文档中看到，您将更新方法作为突变的一部分，因此您应该在突变后使用此方法来更新应用程序。

您可以使用该update功能更新UI数据并在完成突变后更新它吗？如果可以的话，这是现在进行更新的标准方法吗？

*使用refetchQueries不起作用

正如您在图像中看到的那样，console.info()显示内容是，data.status = "CREATED";但直接从突变返回的请求data.status = "PICKED"; PICKED是数据库中正确且最新的信息。