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

[alexmahan]

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,
            };
          });
        },
      );
    },
  },
};

[drewbaker]

@alexmahan i do want to point out that you don’t need to do any of this dynamic route stuff in the new versions of nuxt. It’s built in crawler will find the routes for you. Maybe you know this and are doing something differently here, but just a tip.

[alexmahan]

Thanks for the suggestions @Gomah @drewbaker! For some reason Nuxt isn't building those routes dynamically on generate for us, but perhaps we're doing something wrong. Will take another look.

[andreasvirkus]

Is there a way to source the query from an external file? Can't seem to get the .gql import working inside the config 😕

[drewbaker]

Yes. See here for an example: https://github.com/funkhaus/fuxt/blob/master/templates/page-default.vue

Check out the package file for that repo to see what you need for that to work.

[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