[solved] - running a Query imperatively

Get Help and Help Others
1

I need to execute a Cell without putting it on the page, well that is to say - I need to run the Query from inside a cell without re-rendering the component that otherwise would contain the Cell…

It’d be nice to be able to store a query in a Cell - and await it’s completion as if it were being rendered…

I’m using Material-UI’s DataGrid and trying to implement server based pagination.

In order to do this I need to await a graphQL query – I can’t redraw the component

Thanks for your time & attention

Al;

2

Ok,

So I can now run a query on demand within the React component so that it doesn’t rerender - but sending the session cookie doesn’t get me past requireAuth

  React.useEffect(() => {
    loadServerRows({ eventId, pageSize, pageNum, sortModel, filterModel })
  }, [eventId, pageSize, pageNum, sortModel, filterModel, columns])

  function loadServerRows({
    eventId,
    pageSize,
    pageNum,
    sortModel,
    filterModel,
  }) {
    ky.post(`${process.env.REDIRECT_URL}/.netlify/functions/graphql`, {
      json: {
        query: QUERY,
        variables: {
          eventId,
          pageSize,
          pageNum,
          sortModel,
          filterModel,
        },
      },
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .json()
      .then(({ data, errors }) => {
        if (errors) {
          console.error(`errors`, JSON.stringify(errors, null, 2))
        }
        if (data) {
          const { citizens } = data
          const { rows, rowCount: newRowCount, pageNum: newPageNum } = citizens
          console.debug(
            `newRowCount: ${newRowCount}, newPageNum: ${newPageNum}`
          )
          // console.debug(`rows: ${JSON.stringify(rows)}`)
          setRows(rows)
          setRowCount(newRowCount)
          setPageNum(newPageNum)
          setLoading(false)
        }
      })
  }
3

I figured out how to do this with a cell after all

It would be interesting to know how to authenticate the request tho’

cheers!

4

Hey @ajoslin103 sorry for the late response. Im not sure of the final solution you came to.

In apollo client there is a react hook called useLazyQuery that wont get called on render but whenever you call it. This will have the entire apollo context so your authentication will be sent along with the query. This should give you what you are looking for without having to do all of the code that you had to manually write. Just wanted to leave this here for the future and incase you didn’t know about it.

1 Like
5

Thanks, I actually need that this evening !!

So I’m super glad you dropped that tidbit !!

Thanks!