CODEWITHSUNDEEP
javascriptreactjsgraphqlreact-apolloapollo-client
d_bhatnagar
d_bhatnagar

Reputation: 1497

Fetch graphql query result on render and re-renders BUT LAZILY

I have a React Apollo app and what I am trying to do is that I have a component that renders some data using charts. For this data, I have some filters that I save in the local state of the component (Using hooks)

const [filters, setFilters] = useState(defaultFilters);

Now what I want is that whenever the component mounts, fetch the data using the default filters. But I also want to re-fetch data when the user updates the filters AND CLICKS ON SUBMIT and I'd fetch the results using new filters.

Since I also want to fetch the results on filter update, I am using useLazyQuery hook provided by apollo

const [getData, {data}] = useLazyQuery(GET_DATA_QUERY, { variables: {filters} });

useEffect(getData, []); // this useEffect runs only when the component mounts and never again

But, what happens is whenever my state, filters, updates the getData function is automatically run! ALWAYS! (BEHIND THE SCENE)

  1. How do I handle such cases, where I want to fetch results on mounting and re-rendering. I have tried using useQuery and refetch provided by it but I get the same problem there, whenever I update the state, the component rerenders and the useQuery hooks is run and makes the call. (That's how I believe it runs)

  2. How do I fix my current code. Calling the getData function inside the useEffect function makes it run on every re-render.

I think I the problem defined in this stackoverflow-question is somewhat similar to mine.

Upvotes: 0

Views: 2221

Answers (1)

Daniel Rearden
Daniel Rearden

Reputation: 84867

Part of the problem is that you really have two different states that you're trying to utilize a single hook for. You have state that represents your inputs' values in the UI, and then you have state that represents the filters you want to actually apply to your charts. These are two separate bits of state.

The simplest solution is to just do something like this:

const [inputFilters, setInputFilters] = useState(defaultFilters)
const [appliedFilters, setAppliedFilters] = useState(inputFilters)
const { data } = useQuery(GET_DATA_QUERY, { variables: { filters: appliedFilters } })

const handleSubmit = () => setAppliedFilters(inputFilters)
const handleSomeInputChange = event => setInputFilters(...)

This way, you use inputFilters/setInputFilters only to manage your inputs' state. When the user clicks your submit button, the appliedFilters are set to whatever the inputFilters are at the time, and your query will update to reflect the new variables.

Upvotes: 1

Related Questions