#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} />
}}
/>
)
}