question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Migrate useReferenceInputController to use useDataProvider instead of sagas

See original GitHub issue

The requests made by the <ReferenceInput> component aren’t cached because their controller still uses the CrudGetMatchingAccumulate action creator. That means that the dataProvider.getList() it makes to fetch the possible references is done by the old fetch saga (called by the accumulate saga) instead of the useDataProvider hook. As the cache is only implemented in the new hook, <ReferenceInput> doesn’t use the cache.

We need to migrate the useReferenceInputController code so that it doesn’t use the accumulate saga anymore.

Seen in #4386

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
fancyactioncommented, Aug 26, 2020

@AymanElarian If you’re in need of a temporary solution, here’s a recipe I came up with that could potentially work for you. Main idea being defaulting to a disabled text input and have user click on it to transform into a reference input (which will then make the api calls, if needed). At least for me, it’s often the case that 20 lines will load in and maybe 1,2 or none will need edit. If your users need to edit most/all, then this obviously isn’t a good solution at all for you.

const ConditionalInput = ({ record, source, currentLines, ...props }) => {
    const [enableEdit, setEnableEdit] = useState(false);
    const getSource = useCallback((scopedSource: string) => `${source}.${scopedSource}`, [source]);
    const currentIndex = useMemo(() => parseInt(props.id.match(/\d+/g)), [props.id]);
    const lineValues = currentLines[currentIndex];

    if (!lineValues) {
        return null;
    }

    if (enableEdit || !lineValues.asset_id) {
        return (
            <ReferenceInput
                label="Asset"
                source={getSource('asset_id')}
                reference="parent-assets"
                filterToQuery={(searchText: string) => ({
                    logic: 'or',
                    complexFilter: assetFilter(searchText),
                })}
                sort={{ field: 'parent_number', order: 'ASC' }}
                allowEmpty
                validate={[required()]}
                onChange={ev => setEnableEdit(true)}
                {...props}
            >
                <AutocompleteInput
                    shouldRenderSuggestions={(val: string) => 'undefined' !== typeof val && 2 < val.trim().length}
                    optionText={assetsOptionRenderer}
                />
            </ReferenceInput>
        );
    }

    return (
        <TextInput
            disabled
            source={getSource('asset_description')}
            label="Asset Description"
            onClick={ev => setEnableEdit(true)}
            helperText="Click to Edit"
            value={lineValues.asset_name ? lineLabel(lineValues) : ''}
            {...props}
        />
    );
};
1reaction
AymanElariancommented, Aug 27, 2020

@fancyaction good job Man ! it fit and solve my case very good , thank you

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-admin - Upgrading to v4 - Marmelab
If you need to call the dataProvider and apply side effects, use react-query's useQuery or useMutation hooks instead. -import { useState } from...
Read more >
React Admin: useDataProvider inside a Redux Saga
I am using redux sagas to handle API requests as side-effects while decoupling my view component from this logic. Since react-admin 3.0, to ......
Read more >
React Redux Saga Crash Course - Make HTTP ... - YouTube
Make HTTP requests asynchronously with Redux Saga in React. Redux Saga acts as middleware and can be achieved by leveraging an ES6 feature ......
Read more >
A frontend Framework for building B2B applications running in the ...
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found