Using graphql request inside `generate` to request data for routes?

This is more of a question than an issue. We’re currently using nuxt-graphql-request in our project and it’s working great.

However, we’re looking to make a graphQL request in the generate property of the Nuxt config in order to generate routes based on the query response, something similar is outlined in this post which uses Apollo: https://rosso.codes/blog/nuxt-generate-dynamic-routes-with-apollo-and-graphql/

Wondering if there’s a way to reference/access the graphql property created in the Nuxt config INSIDE another property in the config? Obviously we can’t use this.$graphql inside the generate property.

Or perhaps there’s a way to do this using middleware? Any thoughts welcome. Thanks!

[Gomah]

Hey @alexmahan, indeed, you can’t use this.$graphql inside the generate property as, you have to use graphql-request like the following example:

import { request, gql } from 'graphql-request';

export default {
  generate: {
    routes() {
      const query = gql`
        {
          Movie(title: "Inception") {
            releaseDate
            actors {
              name
            }
          }
        }
      `;
      return request('https://api.graph.cool/simple/v1/movies', query).then(
        res => {
          return res.data.map(movie => {
            return {
              route: '/movies/' + movie.id,
              payload: movie,
            };
          });
        },
      );
    },
  },
};

[andreasvirkus]

Thanks for the reply! I have the queries working inside Vue files, but I’d need to include it in nuxt.config.js so I could use it in the generate.routes option