3
votes

I have a component that behaves like one in Google drive, when you want to move your file/folder. It fetches all the necessary data about directories, displays it, and after one have been chosen - it moves a file into another folder. The goal I'm trying to aim is update data about currently displayed folder and folder where file has been moved. I tried the both way (refetchQueries, update), but non worked...

The main issue is that queries, defined in updateQueries are executed, but store doesn't update.

It would be great, if anyone could help!

const EntityMoveContainer = compose(
    graphql(GET_DIRECTORIES, {
        options() {/*...*/},
        props(props) {/*...*/}
    }),
    graphql(MOVE_FILE, {
       props(props) {
           const { mutate, ownProps } = props;
           const { entity, directoryId } = ownProps;

           return {
            async moveFile(destDirId) {
                return mutate({
                    variables: {
                        fileId: entity.id,
                        directoryId: destDirId,
                    },
                    refetchQueries: () => [
                        {
                            query: GET_DIRECTORIES,
                            variables: {
                                id: directoryId,
                                sortKey: store.sortKey,
                                cursor: store.cursor,
                                filetype: store.filetype,
                            },
                        },
                        {
                            query: GET_DIRECTORIES,
                            variables: {
                                id: destDirId,
                                sortKey: store.sortKey,
                                cursor: store.cursor,
                                filetype: store.filetype,
                            },
                        },
                    ],
                    /* update(proxy) {
                        console.log('update method');
                        try {
                            const storeData = proxy.readQuery({
                                query: GET_DIRECTORIES,
                                variables: {
                                    id: destDirId,
                                    sortKey: store.sortKey,
                                    filetype: store.filetype,
                                    cursor: store.cursor,
                                },
                            });

                            storeData.directory = {
                                ...storeData.directory,
                                files: {
                                    ...storeData.directory.files,
                                    edges: [
                                        ...storeData.directory.files.edges,
                                        { node: entity, __typename: 'File' },
                                    ],
                                },
                            };

                            proxy.writeQuery({
                                query: GET_DIRECTORIES,
                                variables: {
                                    id: destDirId,
                                    sortKey: store.sortKey,
                                    filetype: store.filetype,
                                    cursor: store.cursor,
                                },
                                data: storeData,
                            });
                        } catch (e) {
                            console.log(e);
                        }
                    }, */
                });
            },
        };
    },
}),
)(EntityMoveView)
1

1 Answers

1
votes

The issue was with a

cursor : ''

property I passed into refetchQueries.