graphql-kit / graphql-lodash

🛠 Data manipulation for GraphQL queries with lodash syntax
https://apis.guru/graphql-lodash/
MIT License
1.23k stars 50 forks source link

Is it possible to reverse the transformation process? #19

Closed csyan5 closed 11 months ago

csyan5 commented 4 years ago

Hi,

I just get started learning Graphql and found this package extremely useful for formatting data reading from backend. Thank you!

My question is that is is possible to reverse the transformation process without manually manipulating the object? I'm asking because when I followed the Apollo Documentation (https://www.apollographql.com/docs/react/essentials/mutations/#making-all-other-cache-updates) to implement cache updating using useMutation to create a new object. The newly created object needs to be concatenated to the list of old objects in order to update the cache.

So far I can use graphqlLodash to get back the query (readable to the Apollo client) and use cache.readQuery to get back the DATA (before formatting by graphql-lodash), but it seems not that easy to format the newly created object into the same format of that DATA before I can concat them to update my list of objects.

If there's another way to work around it. Please let me know! Really appreciate that!

Thank you, Changsheng

IvanGoncharov commented 4 years ago

@ChangshengYan I'm not working with Apollo so don't think I fully understood your problem but did you tried: https://github.com/APIs-guru/graphql-lodash#usage-with-react-apollo

csyan5 commented 4 years ago

Hi @IvanGoncharov, thanks for your response. I found that it's not the problem of graphql-lodash. I followed the code in https://github.com/APIs-guru/graphql-lodash#usage-with-react-apollo and my problem is solved now. But I still have a question about this part of code and I would really appreciate it if you could explain how it works with react. Thank you!

export function gqlLodash(rawQuery, config) {
    const {query, transform} = graphqlLodash(rawQuery);
    let origProps = (config && config.props) || ((props) => props);

    return (comp) => graphql(query, {...config,
        props: (props) => origProps({
            ...props,
            rawData: props.data,
            data: transform(props.data),
        })
    })(comp);
}
// then use as bellow
export default gqlLodash(query)(Component);

How does the wrapper work (especially the config and origProps part)? I could not understand this two parts of code clearly.

IvanGoncharov commented 4 years ago

@ChangshengYan, To be honest, I also forgot how it's working :)