Cannot acces variables. Graphql Apollo

I use NextJs with Graphql Apollo and mongoose.
When i use GraphiQL to make requests direct on back it works well, but when i implementing it on front its doesn work

I cannot access variables i have a message -
{"errors":[{"message":"Variable \"$category\" of required type \"String!\" was not provided.","locations":[{"line":1,"column":16}]}]}

Here i defined variables -

   const url = useRouter();
   const name = url.query.category?.toString().toLowerCase();

   const { data, loading, error } = useQuery(GET_PRODUCTS, { variables: { name : name}});

This is my fethc -

export const GET_PRODUCTS = gql`
  query products($category: String!){
    products(category: $category) {
      title
      id
      img
      decsiprion
      brend
      price
      altDescription
      category
      article
    }
  }
`;

This is backend -

const ProductType = new GraphQLObjectType({
  name: "Product",
  fields: () => ({
    id: { type: GraphQLID },
    img: { type: GraphQLString },
    title: { type: GraphQLString },
    decsiprion: { type: GraphQLString },
    brend: { type: GraphQLString },
    price: { type: GraphQLInt },
    altDescription: { type: GraphQLString },
    category: { type: GraphQLString },
    article: { type: GraphQLInt },
  }),
});

const Rootquery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    products: {
      // take all products by category
      type: new GraphQLList(ProductType),
      args: { category: { type:GraphQLString }},
      resolve(parent, args) {
        return Product.find(args).exec();
      },
    },
    product: {
      // take only one by id
      type: ProductType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return Product.findById(args.id);
      },
    },
  },
});

I tryed to put variables just to see if its works, i did like this -

 const { data, loading, error } = useQuery(GET_PRODUCTS, { variables: { name : 'woundrecovery'}});

And stil got error message.

Very close, I think all you need to do is provide "category" as the variable, so like this:

 const { data, loading, error } = useQuery(GET_PRODUCTS, { variables: { category : 'woundrecovery'}});

alternativaly, in your query you can make category not required, so you don't have to pass the variable in

query products($category: String!) becomes query products($category: String)

Graphql expects to find a key named "category" in the variables object that you pass to the request. so changing

const { data, loading, error } = useQuery(GET_PRODUCTS, { variables: { name : 'woundrecovery'}});

to

const { data, loading, error } = useQuery(GET_PRODUCTS, { variables: { category : 'woundrecovery'}});

should fix your issue