Cookbook example: Polling

Get Help and Help Others
1

Maybe there should be a recipe on how to do polling with redwoodjs because of prisma2 don’t support subscription?

1 Like
2

Thanks for your question @guledali! Could you explain your use case?

Polling from the frontend to your app is supported via Apollo client. useQuery is just a passthrough to the Apollo React hooks!

You can see available parameters here: https://www.apollographql.com/docs/react/api/react-hooks/

Specifically, you’d pass a non-zero pollInterval.

That would poll your GraphQL API (and pass through polling queries to the Prisma client).

2 Likes
3

I agree with @guledali in that I would very much like to see a polling example

If it’s a matter of showing us how to you redwood/web’s useQuery that’s fine too – the only mention of the useQuery in the docs says: ‘you can use useQuery, but you should use a Cell’ which is instructional but not helpful

I don’t have enough apollo to understand how to useQuery instead of a Cell and I can’t find a demo

I very much need to know how/where to pass: pollInterval – I’m so close to demo done and I still would like to demo a login…

I wish I could pass it as a prop on the Cell - but that doesn’t work…

my use case is having to re-execute a cell on a timer – I’m getting close to replacing it on the page using an interval – so hacky…

I can’t find useQuery in the docs, cookbooks, or tutorials…

Searching…

1 Like
4

This is what I used sometime ago to poll for new notifications – ie, the “bell” icon.

export const beforeQuery = () => {
  return {
    pollInterval: 1000 * 60 * 5,
  }
}

export const QUERY = gql`
  query NotificationIndicatorQuery {
    recentNotificationCount
  }
`

The beforeQuery adds these to the useQuery as defined by QUERY.

For more info:

beforeQuery is a lifecycle hook.

Polling provides near-real-time synchronization with your server by causing a query to execute periodically at a specified interval

5 
export const beforeQuery = () => {
  return {
    pollInterval: 1000 * 60 * 5,
  }
}

That’s the stuff !!

So the results of beforeQuery are passed as parameters to the Apollo useQuery – I found useQuery in the withCellHOC.tsx file so I knew there was a way – Redwood is slick!

Back when Aurelia hit the ground running it had this slick feel (in a lot of ways it still does) but now that Redwood is my new Fave (I’m so fickle:-) I want more !!!

@dthyresson you are keeping me alive in this forced march to Monday’s demo - I can’t thank you enough !! Please pass me the link to the docs so that I can contribute to them as I learn << found this.

Edit: the query doesn’t re-execute…

export const beforeQuery = (props) => {
  return { variables:props, fetchPolicy: 'network-only', pollInterval: 1000 * 1.5 }
}

I am expecting the Cell to be rendered again and again…

React isn’t doing that, because nothing has changed…?

1 Like
6

Glad to help.

Thanks! Much appreciated!

https://github.com/redwoodjs/redwoodjs.com/tree/main/docs

You can always check your api service to see that it is being called - it should invoke graphql every second.

FYI -

network-only → Apollo Client executes the full query against your GraphQL server, without first checking the cache. The query’s result is stored in the cache.

Look at Queries - Apollo GraphQL Docs

Maybe you want no-cache

Similar to network-only, except the query’s result is not stored in the cache.

7

Hrmmm – my service is not being called repeatedly… nor is my AWS endpoint…

Odd, I noticed that my UI didn’t refresh when I saved changes to the Cell – so I reloaded manually

And now it works… :+1:t3:

(I could’ve sworn the UI was reloading as I changed Cell files… Ah, worry about that later…)

8

Submitted a PR for Docs

add example of beforeQuery export for polling

2 Likes
9

Thanks!

Can find it here: https://github.com/redwoodjs/redwoodjs.com/pull/641

1 Like
10

@ajoslin103’s beforeQuery approach works great! Inlining his docs contribution here in case that’s helpful to any readers of this thread:

export const beforeQuery = (props) => {
  return {
    variables: props,
    fetchPolicy: 'no-cache',
    pollInterval: 1000,
  }
}

This goes into your cell file.

2 Likes