search, query, refetch

1. serch, query, refetch

Search.tsx

const SearchBar = styled.TextInput`
  background-color: black;
  padding: 10px 15px;
  border-radius: 15px;
  width: 90%;
  margin: 10px auto;
  color: white;
`

const Search = () => {
  const [query, setQuery] = useState('')
  const { isLoading, data, refetch } = useQuery(
    ['searchMovies', query],
    moviesApi.search,
    { enabled: false }
  )
  const onChangeText = (text: string) => setQuery(text)
  const onSubmit = () => {
    if (query === '') {
      return
    }
    refetch()
  }
  console.log(isLoading, data)
  return (
    <Container>
      <SearchBar
        placeholder="Search Movie"
        placeholderTextColor="gray"
        returnKeyLabel="search"
        returnKeyType="search"
        onChangeText={onChangeText}
        onSubmitEditing={onSubmit}
      />
      {isLoading ? <Loader /> : null}
      {data ? (
        <FlatList
          contentContainerStyle={{ paddingLeft: 30 }}
          horizontal
          keyExtractor={(item) => item.id + ''}
          showsHorizontalScrollIndicator={false}
          ItemSeparatorComponent={() => <View style={{ width: 20 }} />}
          data={data.results}
          renderItem={({ item }) => (
            <Movie key={item.id}>
              <Poster path={item.poster_path || ''} />
              <Title>
                {item.original_title.slice(0, 10)}
                {item.original_title.length > 13 ? '...' : null}
              </Title>
              <Votes>{item.vote_average}/10</Votes>
            </Movie>
          )}
        />
      ) : null}
    </Container>
  )
}

export default Search~~~~

  
1. SearchBar component를 styled.TextInput로 만듬

2. [query, setQuery] = useState('')를 만들어서
query값을 담을 State를 만듬

3. onChangeText함수를 만들어서 text를 setQuery(text)
query에 담음

4. onSubmit 함수를 만들어서 query값이 null일때 return을
하고, 값이 있으면, refetch()를 실행한다.
refetch하는 이유는 Page가 첨 열렸을떄, useQuery가 실행되지 않게
해 놓음.  { enabled: false } , 그 이유는 page가 rendering됬을때, useQuery가 실행되면 query가 null인 상태로 movies.search로 보내짐.

5. <Searchbar /> component에 props들을 담는다.
      <SearchBar
        placeholder="Search Movie"
        placeholderTextColor="gray"
        returnKeyLabel="search"
        returnKeyType="search"
        onChangeText={onChangeText}
        onSubmitEditing={onSubmit}
      />
      check!! onChangeText={}, onSubmitEditing={}
      
6. moviesApi.search에 담긴 query를 보내는 방법
const {data, isLoa...} = useQuery(['searchMovie', query], moviesApi.search)

7.moviesApi.search에서 query를 받는 방법.

~~
const search = ({ queryKey }) => {
  const [_, query] = queryKey
  return fetch(
    `${BASE_URL}/search/movie?api_key=${API_KEY}&language=en-US&query=${query}&page=1`
  ).then((res) => res.json())
}
export const moviesApi = { trending, upcoming, nowPlaying, search }
~~

check!!!
1. 반드시 fetch를 return 해 줄것.
2. const [_, query] = queryKey 로 query받음,
3. ({queryKey}) 로 받음..