Apollo와 React : onClick()에서 발생한 돌연변이에서 refreshQueries가 작동하지 않습니다.

Question

간단한 쇼핑 앱을 만들고 있습니다. 로드가 발생하면 장바구니가 있는지 여부를 확인하는 쿼리를 작성합니다. 현재 해당 쿼리는 항상 null을 반환합니다 (아직 장바구니가 있는지 여부를 확인하기위한 로직을 아직 구현하지 않았습니다). 그런 다음 사용자가 "장바구니 만들기"를 클릭하면 우리는 돌연변이를 만들어 만듭니다. 마지막으로 돌연변이가 완료된 후 refreshQueries을 사용하여 돌연변이에서 반환 된 ID로 카트 (및 해당 제품)를 가져옵니다. 그런 다음 해당 제품을 순수한 구성 요소로 렌더링합니다.

내가 만나는 문제는 사용자가 버튼을 클릭 한 후 다시 렌더링하지 않으며 refreshQueries이 발생한다는 것입니다. 내 개발자 도구의 네트워크 탭을보고 쿼리가 전송되고 제품이 포함 된 생성 된 장바구니가 반환됩니다. 아폴로가 변화를 느끼지 않는 것 같습니다.

몽고는 제 백 엔드입니다. 것이 도움이 있다면 여기,

// query 
import { gql } from 'react-apollo'; 

export const cartQuery = gql` 
    query CartQuery($cartId: ID) { 
    cart(cartId: $cartId) { 
     _id, 
     products { 
     _id, 
     name 
     } 
    } 
    } 
`; 

// mutation 
import { gql } from 'react-apollo'; 

export const createCartMutation = gql` 
    mutation CreateCartMutation { 
    createCart { 
     _id 
    } 
    } 
`; 

// Apollo + React stuff 
import React from 'react'; 
import { graphql } from 'react-apollo'; 

import { createCartMutation } from '../../mutations'; 
import { cartQuery } from '../../queries'; 

const BuildCart = ({ mutate }) => (
    <button 
    onClick={() => { 
     // even when I hardcode the ID of a cart that exists and contains products, it doesn't matter 
     mutate({ 
     refetchQueries: [{ query: cartQuery, variables: { cartId: '12345abcd' } }], 
     }); 
    }} 
    > 
    Click 
    </button> 
); 

const BuildCartConnected = graphql(createCartMutation)(BuildCart); 

const Cart = ({ data, data: { cart, loading } }) => { 
    console.log(cart); // always null, even after clicking button 
    return (
    <div> 
     <BuildCartConnected /> 
     {loading && <p>Loading...</p>} 
     // never gets to this step, even though the response is a properly formed cart with an array of products 
     {cart && cart.products.map(product => (
     <p key={Math.random()}>{product.name}</p> 
    ))} 
    </div> 
); 
}; 

const CartConnected = graphql(cartQuery)(Cart); 

export default CartConnected; 

refetchQueries에서 응답이 네트워크 탭과 같은 작업은 다음과 같습니다 :

다음은 관련 코드입니다 {"data":{"cart":{"_id":"12345abcd","products":[{"_id":"abcdef12345","name":"Product A","__typename":"Product"}],"__typename":"Cart"}}}

Answer 1

귀하의 cart 쿼리는 cartId 변수를합니다. 위 코드에서 변수를 제공하지 않으므로 그 값은 정의되지 않습니다. Apollo는 쿼리와 변수의 조합을 Cart 구성 요소와 연결합니다.

과 다른 변수를 사용하여 HOC에 제공되는 것보다 높은 값으로 쿼리를 호출하면 해당 새 쿼리의 결과가 가져와 저장소에 보관됩니다. 그러나 Apollo가 알고있는 한, 쿼리의 결과는 아직 가져 오지 않은 새로운 결과가 아니라 해당 구성 요소의 변수 값으로 정의되지 않은 쿼리 결과를 원합니다.

refetchQueries은 사용자가하려는 일에 사용하면 안됩니다. 대신, cart 쿼리의 변수는 소품에서 유래한다 : 당신이 mutate를 호출 할 때

const options = ({cartId}) => ({variables: {cartId}}) 
const CartConnected = graphql(cartQuery, {options})(Cart) 

그런 다음,이 돌연변이에 의해 반환 된 데이터에 해결하는 약속을 반환합니다. 응답에서 cartId를 가져 와서 응용 프로그램 상태 (setState 호출, Redux 작업 실행 등)로 저장할 수 있습니다. 그런 다음 해당 상태를 보조 장치로 Cart 구성 요소로 전달할 수 있습니다. 상태가 업데이트되면 보조 변수가 변경되고 새로 제공된 변수가있는 쿼리가 반입됩니다.