如何将初始变量传递给 createPaginationContainer答案

【问题标题】：how to pass initial variables to createPaginationContainer如何将初始变量传递给 createPaginationContainer
【发布时间】：2020-12-25 20:33:55
【问题描述】：

我正在尝试将createPaginationContainer 与一些变量一起使用，这是我的代码示例：

export const GiftRecipientsPaginationContainer = createPaginationContainer(
  GiftRecipients,
  {
    giftRecipientsMe: graphql`
      fragment GiftRecipients_giftRecipientsMe on Me
      @argumentDefinitions(
        filter: {
          type: "GiftRecipientsFilterInput!"
          defaultValue: { metaMaskEthAddress: null, name: null }
        }
        products: { type: "[ProductGiftInput!]!" }
        first: { type: "Int", defaultValue: 6 }
        after: { type: "String", defaultValue: null }
      ) {
        giftRecipientsConnection(
          products: $products
          filter: $filter
          first: $first
          after: $after
        )
          @connection(
            key: "GiftRecipientsMe_giftRecipientsConnection"
            filters: ["filter", "products"]
          ) {
          pageInfo {
            endCursor
            hasNextPage
            hasPreviousPage
            startCursor
          }
          edges {
            node {
              vipXP
            }
          }
        }
      }
    `,
  },
  {
    direction: "forward",
    getConnectionFromProps(props) {
      return props.giftRecipientsMe.giftRecipientsConnection
    },
    getFragmentVariables(prevVars, totalCount) {
      console.log("prevVars", prevVars)
      return {
        ...prevVars,
        count: totalCount,
      }
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      console.log(props, fragmentVariables)
      return {
        filter: fragmentVariables.filter,
        products: fragmentVariables.products,
        first: fragmentVariables.first,
        after: cursor,
        count,
      }
    },
    query: graphql`
      query GiftRecipientsPaginationQuery(
        $filter: GiftRecipientsFilterInput!
        $products: [ProductGiftInput!]!
        $first: Int!
        $after: String
      ) {
        me {
          ...GiftRecipients_giftRecipientsMe
            @arguments(
              filter: $filter
              products: $products
              first: $first
              after: $after
            )
        }
      }
    `,
  }
)

在父组件中，我像这样传递我的变量：

<GiftRecipients
    metaMaskEthAddress={metaMaskEthAddress}
    giftRecipientsMe={me}
/>

现在我在 getFragmentVariables 或 getVariables 中的日志都不会显示，直到我重新获取。如何在初始请求时将变量传递给createPaginationContainer？

【问题讨论】：

标签： graphql react-relay

【解决方案1】：

嗯，我的错误是它们必须来自父片段并被传递到 graphql 查询中

类似这样的：

const CheckoutPromptQueryRenderer = (
  props: CheckoutPromptQueryRendererProps
) => {
  if (!props.checkoutPrompt) return null

  const { checkoutPrompt, relay, metaMaskEthAddress } = props

  return (
    <QueryRenderer
      environment={relay.environment}
      query={graphql`
        query CheckoutPromptQueryRendererQuery(
          $filter: GiftRecipientsFilterInput!
          $products: [ProductGiftInput!]!
        ) {
          me {
            ...GiftRecipients_giftRecipientsMe
              @arguments(products: $products, filter: $filter)
          }
        }
      `}
      variables={{
        products: checkoutPrompt.productIDs.map(id => ({ productID: id })),
        filter: metaMaskEthAddress
          ? { metaMaskEthAddress: metaMaskEthAddress, name: null }
          : { metaMaskEthAddress: null, name: null },
      }}
      render={(
        response: QueryRendererReadyState<CheckoutPromptQueryRendererQueryResponse>
      ) => {
        if (response.error) {
          console.log(response.error)
          throw "Error querying checkout prompt"
        }
        if (!response.props) return null

        return <CheckoutPrompt {...response.props} />
      }}
    />
  )
}

【讨论】：