web-dev-qa-db-ja.com

React Apollo Clientが機能していませんか？

<Query />ファイルに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>

Main.jsファイルには<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>

switchSelectedProductが<Mutation />コンポーネント内で呼び出されると、console.log("refetchQueries", product.id);ステートメントを見るとrefetchQueriesを実行しますが、<Query />コンポーネントのHome.jsコンポーネントの更新結果は表示されません。

<Query />ファイルでrefetchQueriesが実行されたときに通知を受けるようにHome.jsのMain.jsコンポーネントに指示するにはどうすればよいですか？

助言がありますか？

javascriptreactjsgraphqlapolloreact-apollo
6
deadcoder0904

私はいくつかの助けを借りてそれを解決しました。 refetchQueriesには、別のコンポーネントからのデータを更新しないため、明らかにバグがあります。しかし、refetchQueriesはまったく必要ありませんでした。

Homeコンポーネントを別のQueryでラップしました：

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>

次に、Mainコンポーネントを別のQueryでラップし、ミューテーションが適用されると状態が変わるようにしました。この方法では、refetchQueriesはまったく必要ありません。別のコンポーネントまたは同じコンポーネントからMutationが実行された場合、QueryまたはMutationコンポーネントをラップするだけです。

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

ドキュメントから：refetchQueries: (mutationResult: FetchResult) => Array<{ query: DocumentNode, variables?: TVariables} | string>。したがって、おそらくオブジェクトだけではなく配列を返す必要があります

<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

関数を返す代わりに、オブジェクトの配列を直接渡す必要があります

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