[apollographql#11305]update queries doc

docs/source/data/queries.mdx

@@ -24,7 +24,7 @@ The `useQuery` [React hook](https://react.dev/reference/react) is the primary AP
 
 Let's look at an example. First, we'll create a GraphQL query named `GET_DOGS`. Remember to wrap query strings in the `gql` function to parse them into query documents:
 
-```jsx title="index.js"
+```jsx title="main.jsx"
 import { gql, useQuery } from '@apollo/client';
 
 const GET_DOGS = gql`
@@ -39,7 +39,7 @@ const GET_DOGS = gql`
 
 Next, we'll create a component named `Dogs`. Inside it, we'll pass our `GET_DOGS` query to the `useQuery` hook:
 
-```jsx title="index.js"
+```jsx title="main.jsx"
 function Dogs({ onDogSelected }) {
   const { loading, error, data } = useQuery(GET_DOGS);
 
@@ -73,7 +73,7 @@ Whenever Apollo Client fetches query results from your server, it automatically
 
 To see this caching in action, let's build a new component called `DogPhoto`. `DogPhoto` accepts a prop called `breed` that reflects the current value of the dropdown menu in our `Dogs` component:
 
-```jsx title="index.js"
+```jsx title="main.jsx"
 const GET_DOG_PHOTO = gql`
   query Dog($breed: String!) {
     dog(breed: $breed) {
@@ -111,7 +111,7 @@ Sometimes, you want to make sure that your query's cached data is up to date wit
 
 Polling provides near-real-time synchronization with your server by executing your query periodically at a specified interval. To enable polling for a query, pass a `pollInterval` configuration option to the `useQuery` hook with an interval in milliseconds:
 
-```jsx title="index.js" {4}
+```jsx title="main.jsx" {4}
 function DogPhoto({ breed }) {
   const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
     variables: { breed },
@@ -143,7 +143,7 @@ You can optionally provide a new `variables` object to the `refetch` function.
 If you avoid passing a `variables` object and use only `refetch()`, the query
 uses the same `variables` that it used in its previous execution.
 
-```jsx {2,12} title="index.js"
+```jsx {2,12} title="main.jsx"
 function DogPhoto({ breed }) {
   const { loading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
     variables: { breed },
@@ -192,7 +192,7 @@ Let's return to our refetching example from the previous section. If you click t
 The `useQuery` hook's result object provides fine-grained information about the status of the query via the `networkStatus` property. To take advantage
 of this information, we set the `notifyOnNetworkStatusChange` option to `true` so our [query component](../api/react/components/ "Components - Client (React) - Apollo GraphQL Docs") re-renders while a refetch is in flight:
 
-```jsx title="index.js" {4,8,12}
+```jsx title="main.jsx" {4,8,12}
 import { NetworkStatus } from '@apollo/client';
 
 function DogPhoto({ breed }) {
@@ -242,7 +242,7 @@ The `useLazyQuery` hook is perfect for executing queries in response to events b
 
 Here's an example:
 
-```jsx {2,5,13} title="index.js"
+```jsx {2,5,13} title="main.jsx"
 import React from 'react';
 import { useLazyQuery } from '@apollo/client';