CODEWITHSUNDEEP
reactjsgraphqlapollo-client
Gil Cohen
Gil Cohen

Reputation: 341

Using GraphQL Fragment for the Whole Return Values

I'm having trouble reusing fragments inside queries.

Dependencies:

I'm importing gql from @apollo/client.

This is my fragment:

export const totalRecipeReturnValFragment = gql`
  fragment totalRecipeReturnValFragment on RecipeOutput {
    _id
    instructions
    sections {
      name
      ingredients {
        name
        amount
        unit
        isRangedAmount
        topRange
        bottomRange
      }
    }
    name
    duration
    userId
    preparations {
      _id
      stringifiedTime
      occasion
      rating
      comment
    }
  }
`;

When I'm using just in a mutation, with a "variable", it works as expected:

export const updateRecipe = gql`
  mutation updateRecipe($updatedRecipe: RecipeUpdateInput!) {
    updateRecipe(updatedRecipe: $updatedRecipe) {
      success
      errorMessage
      recipeAfterUpdate {
        ...totalRecipeReturnValFragment
      }
    }
  }
  ${totalRecipeReturnValFragment}
`;

But, I have a few queries in which I'd like to use just the fragment, without a "variable".

This is one of the original queries:

export default gql`
  query getUserRecipes($userId: String!) {
    getUserRecipes(userId: $userId) {
      _id
      instructions
      sections {
        name
        ingredients {
          name
          amount
          unit
          isRangedAmount
          topRange
          bottomRange
        }
      }
      name
      duration
      userId
      preparations {
        _id
        stringifiedTime
        comment
        occasion
        rating
      }
    }
  }
`;

This is what I've been trying to use:

export default gql`
  query getUserRecipes($userId: String!) {
    getUserRecipes(userId: $userId) {
      ...totalRecipeReturnValFragment
    }
  }
  ${totalRecipeReturnValFragment}
`;

The above query compiles, but the data in the code doesn't contain any field.

Any suggestions? Thanks!

Upvotes: 2

Views: 655

Answers (1)

Gil Cohen
Gil Cohen

Reputation: 341

The issue was that I used cache: new InMemoryCache({ addTypename: false }) in my ApolloClient. Once I removed the { addTypename: false }, it worked like a charm.

Upvotes: 0

Related Questions