Skip to content
This repository has been archived by the owner on May 26, 2023. It is now read-only.

How to display values from database in real time with apollo client 3 and react js? #103

Open
plateforme100 opened this issue Jun 23, 2022 · 0 comments

Comments

@plateforme100
Copy link

plateforme100 commented Jun 23, 2022

How to display values from database in real time without refreshing the webpage ?
How to update data with apollo client 3, for example, a user adds a category, how to make this category appear to all other pages? this function lists all the catagory from database:

async  componentDidMount() {
setInterval(async()=>{
  
  await client.query({
    query: LISTER_CATEGORIE 
  },   
  )
    .then((response) => {
      this.setState({ ...this.state, categories: response.data.listerCategorie });
    })
    .catch((err) => console.error(err));


},3000)

}

this's the client:

  export const client = new ApolloClient({
      link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) graphQLErrors.map(({ message, locations, path }) => console.log(`[GraphQL error]:
 Message: ${message},
 Location: ${locations}, Path: ${path}`));
    if (networkError) console.log(`[Network error]: ${networkError}`);}),
    new createUploadLink({ uri: 'http://localhost:8080/graphql'})
    ]),
      cache: new InMemoryCache({ typePolicies: {
        Query: {
          fields: {
            categorie(existingData, { args, toReference }) {
              return existingData || 
                toReference({ __typename: 'Categorie', id: args.id });
            },
          .............

and this function adds a category:


  async  ajouterCategorie() {
await client.mutate({
  mutation: AJOUTER_CATEGORIE,
  variables: {
    titre: this.state.newCategorie.titre,
    presentation: this.state.newCategorie.presentation,
    image: '',
    dateCreation: new Date(),
    file: this.state.file,
    cours: []
  }, refetchQueries: [
    { query: LISTER_CATEGORIE }
  ], 
})
  .then((response) => {
    
    this.props.add(response.data.ajouterCategorie)
    this.pushNotify("Catégorie Ajouté avec succès", 'success', "Ajout Categorie")
  })
  .catch((err) => console.error(err));
this.handleClose()
}

i used ComponentDidUpadate but it not worked too. Thank you in advance.

@plateforme100 plateforme100 changed the title how to update the state from database with apollo client 3 and react js? How to display values from database in real time with apollo client 3 and react js? Jun 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant