как передать начальные переменные в createPaginationContainer

#graphql #react-relay

#graphql #реакция-реле

Вопрос:

я пытаюсь использовать 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 в начальный запрос?

Ответ №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} />
      }}
    />
  )
}