React-Apollo-GraphQL 通用查询和突变

Question

This question is more about design . In my heavy app and want to implement generic mutation and query action. My first thought was to implement a function that encapsulates all queries or mutations in one place. Like this:

function query(props) {
  const Query = require('dynamic/query/based/on/props.path.gql');
  const { data, loading, ...} = useQuery(Query, ...);
  return { data, loading, ... };
}

then use it

import Query form './query';
function SomeMainFunction(props) {
  cont { data, loading, ...} = Query(props);
  return data.map(...);
}

(Similar for mutation) It seems to me like this is causing unnecessary rerendering even with React.memo . The second approach was to make use of useContext . But I don't really see how to deal with network status in this case. Meaning having loading true and then false . Or will useQuery handle this by re-rendering the component once the data arrives?

Of cause, the third solution is to implement this logic directly in the function/component. Something I don't want because of code splitting.

Answer 1

I end up using the above-mentioned design with proper use of memo and it solved my issue.