web-dev-qa-db-fra.com

refetchQueries dans le composant de mutation de React Apollo Client ne fonctionne pas?

J'ai un _<Query />_ dans mon fichier _Home.js_

Home.js

_<Query
      query={GET_TODOS_BY_PRODUCT}
      variables={{ id: state.get("selectedProduct.id"), completed: true }}
    >
      {({ data: { product } }) => {
        return <Main todos={product.todos} hashtag={product.hashtag} />;
      }}
</Query>
_

Dans mon fichier _Main.js_ j'ai le composant _<Mutation />_ -

Main.js

_<Mutation
    key={v4()}
    mutation={SWITCH_SELECTED_PRODUCT}
    refetchQueries={() => {
        console.log("refetchQueries", product.id);
        return {
            query: GET_TODOS_BY_PRODUCT,
            variables: { id: product.id }
        };
    }}
>
{switchSelectedProduct => (
        <Product
            onClick={() => {
                switchSelectedProduct({
                    variables: { id: product.id, name: product.name }
                });
            }}
            highlight={
                data.selectedProduct
                    ? product.name === data.selectedProduct.name
                    : i === 0
            }
        >
            <Name>{product.name}</Name>
        </Product>
    )}
</Mutation>
_

Lorsque switchSelectedProduct est appelé dans le composant _<Mutation />_, il exécute refetchQueries comme je vois l'instruction console.log("refetchQueries", product.id); mais je ne vois pas les résultats mis à jour dans le _<Query />_ composant dans le fichier _Home.js_.

Comment dire au composant _<Query />_ dans _Home.js_ d'être averti lorsque refetchQueries est exécuté dans le fichier _Main.js_?

Aucune suggestion?

javascriptreactjsgraphqlapolloreact-apollo
6
deadcoder0904

Je l'ai résolu avec de l'aide. Il y a apparemment un bogue dans refetchQueries car il ne met pas à jour les données d'un autre composant. Mais refetchQueries n'était pas du tout nécessaire.

J'ai enveloppé mon composant Home avec un autre Query comme:

Home.js

<Query
    query={GET_ALL_PRODUCTS}
    variables={{ id: state.get("user.id") }}
>
    {({ data: { user } }) => {
        const { id, name } = user.products ? user.products[0] : [];
        return <Main id={id} name={name} />;
    }}
</Query>

Ensuite, j'ai également enveloppé mon composant Main avec un autre Query afin qu'il change d'état lorsque la mutation est appliquée. De cette façon, vous n'avez pas du tout besoin de refetchQueries. Enveloppez simplement votre composant Mutation ou Query lorsque Mutation à partir d'un autre ou du même composant est effectué.

Main.js

<Query query={GET_SELECTED_PRODUCT}>
    <Mutation
            key={v4()}
            mutation={SWITCH_SELECTED_PRODUCT}
    >
    {switchSelectedProduct => (
                    <Product
                            onClick={() => {
                                    switchSelectedProduct({
                                            variables: { id: product.id, name: product.name }
                                    });
                            }}
                            highlight={
                                    data.selectedProduct
                                            ? product.name === data.selectedProduct.name
                                            : i === 0
                            }
                    >
                            <Name>{product.name}</Name>
                    </Product>
            )}
    </Mutation>
</Query>
2
deadcoder0904

De docs: refetchQueries: (mutationResult: FetchResult) => Array<{ query: DocumentNode, variables?: TVariables} | string>, donc probablement vous devez retourner un tableau au lieu de simplement l'objet

<Mutation
  key={v4()}
  mutation={SWITCH_SELECTED_PRODUCT}
  refetchQueries={() => {
     console.log("refetchQueries", product.id)
     return [{
        query: GET_TODOS_BY_PRODUCT,
        variables: { id: product.id }
    }];
}}
>
10
alexhenkel

Au lieu de renvoyer une fonction, vous devez passer directement le tableau d'objets

<Mutation refetchQueries={[{query:YOUR_QUERY}>
 ...code
</Mutation>
1
S mahat