1

I am practicing Apex but I guess I'm stuck on trying to achieve something. I have a memory game in Apex. When a user finishes with the game, an record is inserted using the 'import { createRecord } from 'lightning/uiRecordApi';'. However, when the record gets inserted I need to refresh the page in order to see it on the list.

What do I need to change so the new record is added to the list as soon as it gets created? My Apex is fetching the first 10 records. thank you in advance. I removed a few lines of codes so it becomes easier to read in this thread.

import { LightningElement, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import fontawesome from '@salesforce/resourceUrl/fontawesome';
import top10MemoryGames from '@salesforce/apex/memoryGameController.getTop10MemoryGame';
import MEMORY_GAME_RECORD from '@salesforce/schema/Memory_Game__c';
import USER_ID from '@salesforce/user/Id';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent} from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';

export default class MemoryGameMain extends LightningElement {

    isLibLoaded = false;
    numberOfCardsOpen = 0;
    cardsOpened = [];
    moves = 0;
    matchedCards = [];
    totalTime = '00:00';
    timerRef;
    showCongratulations = false;

    @track boardData;

    connectedCallback() {
        console.log('connectedCallback');
        this.getTop10Data();
        console.log(JSON.stringify(this.userData));
    }

    //render card in the UL
    //create a ul list and the li should be the iteration
    //inside li load icon
    //the ul should use a grid-container
    renderedCallback(){
        console.log('renderedCallback');
        if(!this.isLibLoaded){
            //loadStyle is a promise that will be returned in the renderedCallback lifecycle
            loadStyle(this,fontawesome+'/fontawesome/css/font-awesome.min.css').then(()=>{
                console.log("loaded successfully");
            }).catch(error => {
                console.log(error);
            })
            this.isLibLoaded = true;
        }
    }

    getTop10Data(){
        console.log('retrieving data');
        top10MemoryGames().then(data =>{
            this.boardData = data;
            console.log(JSON.stringify(data));
            
        }).catch(error => {
            console.log(error);
        })
    }
        
         
    createBoardRecord(obj){
        const recordInput = {apiName: MEMORY_GAME_RECORD.objectApiName, fields: {Duration__c: obj.Duration,Player__c: USER_ID, Moves__c: obj.Moves}};
        console.log('Creating Records: ' + JSON.stringify(recordInput));
        createRecord(recordInput).then(result => {
            this.getTop10Data();
        }).catch(error => {
            this.showToast('Error', `Ops! An error ocurred! Pass this message to your SF admin:${JSON.stringify(error.body.message)}`,'error');
        });
    }

    showToast(title, message, variant){
        this.dispatchEvent(new ShowToastEvent({title,message,variant}))
    }
}

HTML

<template>
<div class="slds-grid slds-gutters">
    <div class="slds-col slds-size_3-of-6">
            <lightning-card title="Memory Game">
                <div class="slds-var-p-around_medium container">
                    <section class="score-panel">
                        <span class="moves">{moves}</span> Move(s)
                        <div class="timer">{totalTime}</div>
                        <div class="restart" onclick={shuffle}>
                            <i class="fa fa-repeat" aria-hidden="true"></i>
                        </div>
                    </section>
                    <section class="game-panel">
                        <ul class="deck card-deck grid-container">
                            <template for:each={cards} for:item="card">
                                <li class={card.listClass} type={card.type} key={card.id} onclick={showIconHandler}>
                                    <i class={card.icon}></i>
                                </li>
                            </template>
                        </ul>
                        <template if:true={showCongratulations}>
                            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                                <div class="slds-modal__container">
                                    <header class="slds-modal__header">
                                        <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Congratulations you're a winner 🎉 🎉
                                        </h2>
                                    </header>
                                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                                <p>You made <strong>{moves}</strong> moves in {totalTime}</p>
                                <p>Your rating:
                                    <template for:each={gameRating} for:item="rating">
                                        <i class="fa fa-star" key={rating}></i>
                                    </template>
                                </p>
                            </div>
                            <footer class="slds-modal__footer">
                                <button class="slds-button slds-button_brand" onclick={shuffle}>Play Again</button>
                            </footer>
                            </div>
                                </section>
                            <div class="slds-backdrop slds-backdrop_open"></div>
                        </template>
                    </section>
                </div>
            </lightning-card>
    </div>
    <div class="slds-col slds-size_3-of-6">
        <lightning-card title="Board Game" >
            <template for:each={boardData} for:item="item">
                <div key={item.Id} class="game-item">
                    <div class="two-columns">
                        <p>{item.Name}</p>
                        <p>Date: {item.CreatedDate}</p>
                    </div>
                    <p>Player: {item.Player__r.FirstName} {item.Player__r.LastName}</p>
                    <p>Duration: {item.Duration__c}</p>
                    <p>Moves: {item.Moves__c}</p>
                </div>
            </template>
        </lightning-card>
    </div>
</div>

APEX

public with sharing class memoryGameController {
@AuraEnabled(cacheable=true)
public static List<Memory_Game__c> getTop10MemoryGame(){
    List<Memory_Game__c> memoryGames = [SELECT CreatedDate,Duration__c,Name,Player__r.FirstName,Player__r.LastName,Moves__c FROM Memory_Game__c ORDER BY Duration__c ASC LIMIT 10 ];
    return memoryGames;
}

}

1 Answer 1

1

@AuraEnabled(cacheable=true) means that the same method called in a short period of time will use cached data without calling the method again. This cache is clear(ed) when you (re)load the page, which is why reloading fixes the problem. Change it to @AuraEnabled(cacheable=false), and your code should work just fine.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .