GIPHY API returns the same results everytime

Question

I have this problem that the GIPHY API always returns the same results. And I'm quite sure this is not because I somehow store the previous result and post it again and again. For example, I type in 'dog' and ask for 5 results .. I get 5 dog gifs, then I refresh the page and repeat the process and get exactly the same gifs.

Is there an elegant solution to get random gifs every time I make a request?

The solution I thought of is: when I make a repeated request, I would request (under the hood) for 10 gifs and then would post on the page from these new 10 gifs just the 5 new ones but this solution can get quite messy when the amount of gifs needed will get larger.

Here's my code so far:

    <v-container>
        <v-layout text-center wrap>
            <v-flex xs12>
                <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
            </v-flex>
            <v-text-field label="Search" outlined rounded v-model="searchText"></v-text-field>
            <v-btn outlined rounded block @click="findGIF">Search</v-btn>
            <div class="gifs" v-show="showGIFs" ref="gifs">
                <div v-for="(gif, index) in gifs" :key="index">
                    <img class="gif" :src="gif.preview" />
                </div>
            </div>
        </v-layout>
    </v-container>
</template>

<script>
export default {
    data: function() {
        return {
            searchText: "",
            gifs: [],
            index: 1,
            showGIFs: true
        };
    },
    methods: {
        async fetchGIFs(number) {
            let apiKey = "myKey"; // deleted to keep it private
            let searchEndPoint = "https://api.giphy.com/v1/gifs/search?";
            let limit = number;
            let gifsArray = [];

            let url = `${searchEndPoint}&api_key=${apiKey}&q=${this.searchText}&limit=${limit}`;

            try {
                let response = await fetch(url);
                let json = await response.json();

                json.data.forEach(gif => {
                    gifsArray.push({
                        url: gif.url,
                        preview: gif.images.preview_gif.url,
                        src: gif.images.original.url,
                        height: gif.images.original.height,
                        width: gif.images.original.width
                    });
                });

                return gifsArray;
            } catch (error) {
                console.log("Ooops, take a look at this error: " + error);
            }
            return "I guess something didn't go right here";
        },

        findGIF() {
            let temp = [];
            (async () => {
                try {
                    temp = await this.fetchGIFs(5);
                    this.gifs.push(...temp);
                } catch (err) {
                    console.log("Have a look at this: " + err);
                }
            })();
        }
    }
};
</script>

Thank you!

score 3 · Accepted Answer · answered Sep 29 '19 at 11:02

3

GIPHY will return the same GIF object every time for the same query string using the Search Endpoint. If you want to randomize the results, that will be your job.

A possible solution is to create another array, extract random array entries from your gifsArray and push those entries to the new array and then return that array instead.

One alternative solution would be to use the Random Endpoint api.giphy.com/v1/gifs/random. This will work if you are fine with a single random GIF, as it returns a single random GIF.

answered Sep 29 '19 at 11:02

Pieter Steyn

502
4
14

Nice, thank you .. it helped. While you are here .. do you have any idea how I could fist show a preview of the gif while the main one (which is quite big) is being downloaded .. and once the big gif is downloaded, how can I changed it in place of the preview? Is there a way to get notified if a gif has been downloaded? Thank you. – Harleston Sep 29 '19 at 11:32
I think your approach should rather be that you stick with only showing the preview of all the GIFs for a particular query and only request a higher quality version of the GIF once the user chooses a particular GIF. This is to save bandwidth. If you are going to request a large nr of GIFS, imagine the bandwidth load. I am not familiar with Vuetify (which I assume you use), but in standard HTML/JS you could, for eg, do ```previewGIFElem = document.getElementById(previewGIFId); previewGifElem.onclick = function(e) { //request larger GIF and fill that element with the larger GIF };``` – Pieter Steyn Sep 29 '19 at 12:31

GIPHY API returns the same results everytime

1 Answers1