Pass a query url param inside a graphql query (Next js)

Question

I'm trying to get a content by the slug param in the url inside a next js app. When using getServerSideProps, I can pass a context.query.id, but here I'm trying to use getStaticProps. This is what I have so far:

export async function getStaticProps() {
  const apolloClient = initializeApollo();
  const { data } = await apolloClient.query({
    query: SLUG_QUERY,
  });

  return addApolloState(apolloClient, {
    props: {
      data,
    },
    revalidate: 60,
  });
}

const SLUG_QUERY = gql`
  query ($id: String!) {
    postCollection(slug: { eq: $id }) {
      items {
        title
        shortDescription
        heroImg {
          url
        }
        createdAt
        slug
      }
    }
  }
`;

I'm struggling to understand How can I pass the conbtext.query.id as a parameter in the gql query. Thanks for the help

Where is the $id coming from? Are you using this in combination with getStaticPaths? Is this a dynamic page? — Christian Hagelid
– Christian Hagelid, Commented Jun 1, 2022 at 1:58
yeah this is a [id].tsx file, and get static path is mapping const paths = data.postCollection.items.map((post) => ({ params: { id: post.slug }, })) — Roberto Fosso
– Roberto Fosso, Commented Jun 1, 2022 at 7:19

Christian Hagelid · Accepted Answer · 2022-06-01 09:30:26Z

3

pass context into your getStaticProps function

export const getStaticProps = async (context) => {

then move your query inside the getStaticProps to use it

postCollection(slug: { eq: $context.params.id }) {

Alternatively, if you prefer to keep your query outside of the function (if you are reusing it elsewhere for example), then just wrap it in a function that takes the id as a parameter

const getPostCollectionQuery = (id) => {
  const SLUG_QUERY = gql`
    query ($id: String!) {
      postCollection(slug: { eq: $id }) {
        items {
          title
          shortDescription
          heroImg {
            url
          }
          createdAt
          slug
        }
      }
    }
  `;

  return SLUG_QUERY;
};

and then you can call that from your getStaticProps function

const { data } = await apolloClient.query({
  query: getPostCollectionQuery(context.params.id),
});

edited Jun 1, 2022 at 9:30

answered Jun 1, 2022 at 7:30

Christian Hagelid

8,3754 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roberto Fosso Over a year ago

but the gql literal query is outside the getStaticProps, I've tried passing it down but doesn't work: export const SLUG_QUERY = (id) => gql` query($id: String!) { postCollection(slug: { eq: $id }){ items{ title, shortDescription, heroImg{ url } createdAt, slug } } } `;

Roberto Fosso Over a year ago

export const getStaticProps = async (context) => { const apolloClient = initializeApollo(); const { data } = await apolloClient.query({ query: SLUG_QUERY(context.params.id) });

Christian Hagelid Over a year ago

@RobertoFosso I missed the fact that you had defined the query outside the function. I've updated my answer. Either move the query inside the function or wrap the query in a helper function

Roberto Fosso Over a year ago

Sorry to come back on this, but the id param after the function declaration is grey out, and is not being passed inside the gql query. I'm getting now the error: ' Variable "$id" of required type "String!" was not provided.'

Collectives™ on Stack Overflow

Pass a query url param inside a graphql query (Next js)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related